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

フレックスボックス項目の整列: 右揃えオプション

質問:

フレックスボックスのコンテキストでは、次のことは可能ですか? 2 つの項目を左に、1 つの項目を右に揃えますか?視覚的な表現については、提供されている JSFiddle リンクを参照してください。

回答:

1 つの flex の子を右揃えにするには、その margin-left: auto; を設定します。

フレックス仕様に従って:

主軸の自動マージンは次のとおりです。フレックス項目を異なる「グループ」に分けるために使用されます。これにより、一部の項目が左に配置され、その他の項目が右に配置されたアクション バーなどの UI パターンを作成できます。

したがって、次の CSS は、提供された例の最後の div 要素を右に配置します。

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

この手法を既存のフレックスボックス スタイルと組み合わせることで、複数のコード ブロックを必要とせずに目的のレイアウトを実現できます。

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