ラッピング後でもフレックスアイテムの幅を確実に揃えるにはどうすればよいですか?

ラップ後も同じ幅のフレックス項目

フレックスボックスは、柔軟なレイアウトを作成する強力な方法を提供しますが、特定の配置要件を達成するのは必ずしも簡単ではありません。よくある課題の 1 つは、フレックス項目が新しい行に折り返された後でも同じ幅を確保することです。

問題

コンテンツの長さが異なる項目のリストがあるシナリオを考えてみましょう。最小幅を維持し、必要に応じて新しい行に折り返しながら、コンテナの幅を満たすように均等に引き伸ばす必要があります。ただし、フレックスボックスのみを使用すると、最後の行の項目が均等に整列しない場合があります。

元の Flexbox アプローチ

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  min-width: 100px;
  flex-grow: 1;
}

このアプローチでは、使用可能なスペースが項目間で分配されますが、そうではありません。最後の行の幅が均等になるようにしてください。

グリッド レイアウト ソリューション

幸いなことに、 CSS グリッド レイアウトは、この問題の解決策を提供します。グリッド レイアウトでは、より明示的なレイアウト メカニズムが使用され、予測しやすくなります。上の例にグリッド レイアウトを適用すると、配置の問題が解決されます。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
}

この更新されたコード スニペットでは、grid-template-columns プロパティを使用してグリッド内の列を定義します。 repeat(auto-fit, ...) 関数は、コンテンツに合わせて列を自動的に割り当て、すべての項目が同じ幅になるようにします。

結論

フレックスボックスは多用途のレイアウト ツールですが、正確なアイテムの位置合わせが必要な状況には適していません。等しい幅のフレックス項目が必要な場合、グリッド レイアウトは、よりシンプルで予測可能なソリューションを提供します。

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