Flexbox 項目を右揃えにするにはどうすればよいですか?-CSSチュートリアル-php.cn

Flexbox 項目を右揃えにするにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-14 09:22:11

オリジナル

449 人が閲覧しました

How Do I Right-Align a Flexbox Item?

フレックスボックスで 1 つの項目を右に揃えるにはどうすればよいですか?

フレックスボックスでは、margin-left: auto; を設定できます。

フレックスボックスの仕様には次のように記載されています。

「主軸での自動マージンの 1 つの用途は、フレックスアイテム
を個別の「グループ」に分けることです。次の例は、これを使用して一般的な UI パターンを再現する方法を示しています。
一部のアクションが左側に配置され、その他が
ある単一のアクションバーです。右側に配置されています。"

更新されたコードスニペットは次のとおりです:

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

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

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

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

.result div {
  float: left;
}

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

ログイン後にコピー

以下の更新された Fiddle は配置を示しています:

[fiddle デモ](https:// jsfiddle.net/vhem8scs/)

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