「margin-left: auto」のみを使用してフレックスボックス項目を右揃えにする方法は?

フレックスボックスで 1 つの項目を右に配置する方法

問題:

提供されたフィドルで、3 番目の項目を次のように配置します。フレックスボックスを使用する右側は難しいようです。最初のコードは 3 つの項目すべてを左に配置しますが、フローティングを使用して目的の結果の最後の項目を右に配置します。

解決策:

フレックス コンテナの 3 番目の子のプロパティ "margin-left: auto" を使用すると、簡単に右揃えになります。この手法は、フレックスボックスの自動マージン機能を活用し、フレックス項目を個別のグループに分散できるようにします。最後のフレックス子に margin-left: auto を指定すると、その位置がコンテナの右側に揃うように自動的に調整されます。

更新されたコード:

次の更新された CSS スニペットは、フレックスボックスを使用して 3 番目の項目を右に揃えます:

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

更新されたフィドルフレックスボックスを使用して要素を正常に配置する例を示します:

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

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

以上が「margin-left: auto」のみを使用してフレックスボックス項目を右揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。