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

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

問題:

モバイル メニューソーシャル メディア アイコンを 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 サイトの他の関連記事を参照してください。