折り返しが発生するとフレックス項目が左ではなく中央に揃えられるのはなぜですか?またその修正方法は?

フレックス項目: ラップの中央ではなく左揃え

このシナリオでは、次を使用してソーシャル メディア アイコンを 3 つの行に表示することを目的としています。モバイルメニュー内のフレックスベースのUL要素。望ましい配置は、等間隔で並べて配置することです。横に並べて配置することはできましたが、アイコンを追加すると問題が発生し、次の行が左からではなく中央から揃えられてしまいます。

解決策:

この配置の問題を修正するには、justify-content: space-around ルールを justify-content: space-between に置き換えます。

説明:

フレックスボックスの仕様によると、justify-content: space-around はフレックス項目を行に沿って両端に半角スペースを入れて均等に配置します。ただし、フレックス項目が 1 つしかない場合、または負の残りのスペースがある場合は、中央揃えと同じように動作し、両方の行に 3 つの項目がある場合にのみ望ましい動作になります。

対照的に、justify-content: space -between は、追加のエンドスペースを追加することなく、フレックス項目を均等に分散します。フレックス項目が 1 つしかない場合、または負の残りスペースがある場合は、デフォルトで flex-start が設定され、フレックス項目が左から整列されます。

space-between を利用することで、フレックス項目は常に左に整列され、確実に左に整列されます。単一行とラップされた行の両方に望ましい動作。

以上が折り返しが発生するとフレックス項目が左ではなく中央に揃えられるのはなぜですか?またその修正方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。