ホームページ  >  記事  >  ウェブフロントエンド  >  ラッピング時にフレックス項目を左に揃えるにはどうすればよいですか?

ラッピング時にフレックス項目を左に揃えるにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-31 18:15:29772ブラウズ

How to Align Flex Items to the Left When Wrapping?

ラップ時にフレックス項目を左揃えにする方法

問題:

モバイル メニューソーシャル メディア アイコンを 3 行に等間隔で水平に配置して表示します。ただし、項目が 3 つ以上ある場合は、後続の行が中央から埋まり始めます。目標は、等間隔を崩さずに各行のリスト項目を左揃えにすることです。

解決策:

justify-content: space-around プロパティを次のように置き換えます。 justify-content: space-between.

説明:

CSS Flexbox では、justify-content プロパティは項目を主軸に沿って水平に配置します。 space-around は、項目の両端に半角スペースを入れて均等に配置します。ただし、スペースが限られている場合や、行上に項目が 1 つしかない場合は、中央揃えのように機能し、項目が中央に配置されます。

これに対して、space-between は、端に半角スペースを入れずに項目を均等に配置します。 。スペースが限られている場合、またはアイテムが 1 つだけの場合、アイテムを左揃えにする flex-start のように動作します。

justify-content: space-between を使用すると、ソーシャル メディア アイコンがそれぞれのアイテムで左揃えになります。

追加の注意事項:

space-between を使用する場合、左右のパディングをコンテナに追加できます。スペースアラウンドの動作をシミュレートします。ただし、各行の複数の項目の配置に対応するために、さらに調整が必要になる場合があります。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。