複数の行にわたって同じ幅のフレックス項目を実現するにはどうすればよいですか?

折り返し中のフレックス項目の等しい幅の維持

CSS で、新しい行に折り返した後でもフレックス項目が同じ幅を維持するレイアウトを実現します。

の使用Flexbox

Flexbox では、コンテナの幅を満たすように項目を動的に拡大するように構成できますが、すべての項目 (特に最後の行) の幅を均等にする組み込み機能はありません。この制限は、フレックスボックス仕様の現在の範囲に起因します。

代替アプローチ: グリッド レイアウト

もう 1 つの CSS3 テクノロジであるグリッド レイアウトは、最後に、より柔軟なソリューションを提供します。行の配置。 Grid-template-columns プロパティを利用すると、項目が複数行に折り返される場合でも、均等に配置することができます。

実装

目的のレイアウトを実現するには:

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

このコードは、利用可能な幅に基づいて列を自動的に分散するグリッドを作成します。各列には、最小幅 100 ピクセルの 1 つ以上のフレックス項目を含めることができ、幅は列の残りのスペースを満たすまで拡張できます。 Grid-auto-rows プロパティは各行の高さを 20 ピクセルに設定し、grid-gap は項目間に 5 ピクセルの間隔を追加します。

結論

一方、フレックスボックスは強力なレイアウト ツールですが、現在の制限により、最後の行での等幅の配置が困難になります。より高度な機能を備えたグリッド レイアウトは、このシナリオに信頼できるソリューションを提供します。

以上が複数の行にわたって同じ幅のフレックス項目を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。