ラッピング後にフレックスボックス内のアイテムの幅を一貫させるにはどうすればよいですか?

フレックスボックス ラップ後の項目幅の一貫性

はじめに:
CSS では、フレックスボックス レイアウトにより、要素に動的なサイズ変更を与えることで要素を柔軟に配置できます。そしてラッピング機能。ただし、一般的な問題の 1 つは、折り返しが発生した後にアイテムの幅を均等にすることです。

問題:
フレックスボックスを使用すると、アイテムの幅が最小になり、アイテムの幅が最小になるレイアウトを作成できます。利用可能なスペースを満たすまで成長します。ただし、項目が複数の行に折り返されると、最後の行の項目の幅が不均等になり、望ましくない外観が発生する可能性があります。

CSS のみの解決策:
残念ながら、純粋な CSS はそうではありません。現在、柔軟なアイテムを最後の行に配置するためのクリーンなソリューションを提供しています。これはフレックスボックス仕様の範囲を超えています。

代替アプローチ: CSS グリッド レイアウト
もう 1 つの CSS3 テクノロジであるグリッド レイアウトは、この問題の解決策を提供します。グリッドを使用すると、アイテムの配置をより正確に制御でき、最後の行でアイテムの幅を均等にすることができます:

コード:

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

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

説明:

• display: グリッドはグリッドを使用するようにコンテナ要素を設定しますlayout.
• grid-template-columns はグリッド内の列を定義し、自動調整により必要な数の列が作成され、minmax() が各列の最小幅と最大幅を設定します。
• Grid-auto-rows は行の高さを指定します。この場合は 20px です。
• grid-gap はグリッド間にスペースを追加しますアイテム。

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