フレックス コンテナ アイテムの左揃え

モバイル メニューでは、ソーシャル メディア アイコンのリストがフレックスボックスを使用して配置されます。均等な間隔を確保するには、justify-content:space-around を使用します。ただし、行に 3 つ以上の項目が含まれる場合は、左揃えではなく中央揃えになります。

The Quandary

この問題は、justify-content: space- であるために発生します。 around は、項目の両端に半角スペースを入れて均等に配置します。残りのスペースがマイナスの場合、または項目が 1 つだけ存在する場合は、中央と同様に動作します。これにより、特定のシナリオで望ましくない中央揃えの動作が発生します。

解決策

ラップ上に残された項目を揃えるには、 justify-content: space-between が答え。このバリエーションでは均等な分散が保証されますが、負の空きスペースがある場合や行内に単一の項目がある場合は、項目を左揃えにする flex-start のように動作します。

サンプル コード

justify-content: space-around を justify-content: space-between に置き換えることで、位置合わせの問題が解決されます。さらに、左右のパディングをコンテナに追加して、スペースアラウンドの間隔効果を模倣することもできます。

さらなる考慮事項

発生する可能性がある潜在的な課題は、次のような場合です。 2 つのアイテムを包み、コンテナの反対側の端に揃えます。ただし、これを解決することはまったく別の問題です。