この質問は、flexboxを含む完全なcss3サポートを備えたブラウザに関するものです。

いくつかのアイテムが入ったフレックスコンテナがあります。それらはすべてフレックススタートに正当化されますが、最後の .endアイテムをフレックスエンドに正当化する必要があります。HTMLを変更せずに、絶対配置に頼らずにこれを行う良い方法はありますか？

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

フレキシブルボックスレイアウトモジュール-8.1。自動マージンに合わせる

フレックスアイテムの自動マージンは、ブロックフローの自動マージンと非常によく似た効果があります。

• フレックスベースとフレキシブル長の計算中、自動マージンは0として扱われます。

• justify-contentおよびを介して位置合わせする前にalign-self、正の空き領域はその次元の自動マージンに分配されます。

したがってmargin-top: auto、他の要素と最後の要素の間にスペースを分散するために使用できます。

これにより、最後の要素が下部に配置されます。

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

同様に、margin-left: autoまたはmargin-right: autoを水平方向に同じ配置に使用することもできます。

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

このフレックスボックスの原則は水平方向にも機能します

フレックスベースとフレキシブル長の計算中、自動マージンは0として扱われ
ます。justify-contentとalign-selfによる位置合わせの前に、正の空き領域がその次元の自動余白に分配されます。

最後のアイテムに自動左マージンを設定すると、作業が実行されます。

.last-item {
  margin-left: auto;
}

コード例：

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Codepenスニペット

これは、デスクトップフッターに非常に役立ちます。

Envatoがここで会社のロゴを使って行ったように。

Codepenスニペット