フレックスボックスを使用して単一の要素を右に揃えるにはどうすればよいですか?

フレックスボックスを使用して 1 つの項目を右に配置する

フレックスボックス レイアウト内で 1 つの要素を右に配置するという問題に対処するために、HTML および CSS コードが提供されています。 2 つのアイテムを左側に、1 つのアイテムを右側に配置する基本的なフレックスボックス設定を紹介します。コンテナ。

HTML

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

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

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

フレックスボックスアプローチ

1 つの子要素を右に揃えるには、次のように設定します。マージン左: 自動;。これは主軸の自動マージン プロパティを活用しており、フレックス項目を個別のグループに分けるのに役立ちます。

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

更新された Fiddle

更新された JSFiddle はこれを示しています。効果的にアプローチする:

[更新Fiddle](https://jsfiddle.net/vhem8scs/)

更新された CSS では、margin-left: auto;プロパティは .wrap コンテナ内の最後の div 要素に適用され、右揃えになります。

以上がフレックスボックスを使用して単一の要素を右に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。