フレックスボックスでは、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 サイトの他の関連記事を参照してください。