Flexbox コンテナ内の 1 つの項目を右揃えにするにはどうすればよいですか?

Flexbox で 1 つのアイテムを正しく配置する方法

アイテムを正確に配置することは、Web デザインにおける一般的な課題です。 Flexbox は強力なソリューションを提供しますが、特定の構成で項目を調整するのは難しい場合があります。この記事では、1 つのアイテムを他のフレックス アイテムの真っ只中に配置する必要がある一般的なシナリオについて説明します。

gt;問題ステートメント

3 つの子アイテムが配置されたフレックス コンテナを考えてみましょう。並んで。望ましい結果は、最初の 2 つの項目が左に揃えられ、3 番目の項目が右に揃えられることです。次の HTML と CSS は初期設定を表しています:

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}

解決策: Margin-Left Auto

Flexbox は、この問題に対する簡単な解決策を提供します。 : 最後の子項目に margin-left: auto を設定します。フレックス仕様から:

主軸の自動マージンの使用法の 1 つは、フレックス項目を個別の「グループ」に分けることです。これは、アクションの単一バーの一般的な UI パターンで例示されており、その一部は左側に配置され、その他は右側に配置されます。

最後に margin-left: auto を適用するこの例の子項目は、目的の配置になります:

.wrap div:last-child {
  margin-left: auto;
}

Updated例

この改訂された CSS を使用すると、結果として得られる HTML および CSS コード スニペットは、フレックス コンテナ内で最初の 2 つの項目が左に配置され、3 番目の項目が右に配置されるという望ましい配置になります。

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

以上がFlexbox コンテナ内の 1 つの項目を右揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。