フレックス項目がラップ時に左ではなく中央に揃えられるのはなぜですか?

フレックス項目をラップ左ではなく中央に配置する

フレックスボックス レイアウトのコンテキストでは、次の場合に特定の配置動作を実現するのが難しい場合があります。アイテムのラッピング。これは、フレックス項目を厳密に左に揃える場合、特に 1 行に収まりきらないほど多くの項目がある場合に顕著です。

問題の説明:

ユーザーは、モバイル メニューの下部に、ソーシャル メディア アイコンのフレックス ベースの順序なしリストを作成しました。彼らの目標は、アイコンを 3 つの行に等間隔に並べることです。当初、彼らは justify-content: space-around を使用して等間隔を実現していましたが、新しい行が左からではなく中央から埋まり始めるという問題が発生しました。この影響は、アイコンを追加するとさらに悪化します。

解決策:

この問題を解決するには、ユーザーは justify-content: space-around を justify- に置き換える必要があります。内容: 間のスペース。この変更により、フレックス項目が行内に均等に分散され、行に空きスペースが残っている場合、または行にフレックス項目が 1 つしかない場合、項目を左に揃える flex-start のように配置が動作することが保証されます。

説明:

justify-content プロパティは、フレックス コンテナーの主軸 (指定された例では水平軸) に沿ったフレックス アイテムの配置を定義します。スペースアラウンド値は、項目の両端に半角スペースを均等に配置します。ただし、空きスペースが不十分な場合、または行に項目が 1 つだけある場合は、中央のように動作します。

対照的に、space-between 値は項目を均等に分散し、空きスペースが限られている場合や単一の項目がある場合に確実に配置します。行上の項目を左に揃える flex-start と同じように揃えます。 space-between を使用すると、アイコンは後続の行の左から整列します。

justify-content: space-around の動作をシミュレートするには、コンテナーのパディングの調整が必要になる場合があることに注意してください。さらに、2 つのアイテムが両端に揃ってラップされると、別の位置合わせの問題が発生する可能性があります。ただし、このトピックについては別の議論が必要です。

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