折り返す場合でも、行全体で同じ幅のフレックスアイテムを実現するにはどうすればよいですか?

可変サイズのコンテナ内の等幅フレックス アイテム

フレックスボックスでは、柔軟で応答性の高いレイアウトが可能ですが、維持しようとすると課題が発生する可能性があります。リストの折り返し後のフレックス項目間の幅は同じになります。

Current Flexbox の制限

現在の仕様では、Flexbox には最後の行の等幅配置のためのネイティブ ソリューションがありません。これは、フレックス項目のサイズが利用可能なスペースに基づいて決定され、最後の行の残りスペースが少なくなる可能性があるためです。

代替解決策: グリッド レイアウト

グリッドもう 1 つの CSS レイアウト手法である Layout は、この配置の問題に対してより堅牢なソリューションを提供します。グリッドを使用すると、コンテナ内の要素のサイズと位置を明示的に指定できます:

CSS コード

.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;
}

説明

• grid-template-columns プロパティは、グリッド内の列のサイズと数を定義します (列の数と同じ)コンテナに合わせて、それぞれの最小幅は 100 ピクセルで、柔軟な 1fr 単位です)。
• grid-auto-rows プロパティは、行の高さを設定します (この場合は 20 ピクセル)。
• grid-gap は項目間のスペースを指定します。

この構成は、有効な幅をフレックス間で均等に分配します。アイテムをラップして、最後の行でも同じサイズを維持できるようにします。

以上が折り返す場合でも、行全体で同じ幅のフレックスアイテムを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。