ラップした後でも同じ幅のフレックスアイテムを実現するにはどうすればよいですか?

ラップした後でもフレックス項目の幅を均等にする

CSS の配置の領域では、フレックス項目をラップした後でも同じ幅を実現することが課題になる場合があります。強力なレイアウト モジュールである Flexbox は、このシナリオにネイティブ ソリューションを提供するには至っていません。

現在の Flexbox 実装には、フレキシブル アイテムを最後の行または列に均等に配置する機能がありません。この制限は現在の仕様に固有のものであり、未解決のままです。

この問題に対処するためのより詳細な分析と代替アプローチについては、次の関連リソースを参照してください。

• [Sizing flex]最後の項目row](https://stackoverflow.com/questions/34259120/sizing-flex-items-on-the-last-row)
• [フレックス項目をその上の項目にしっかりと揃えることは可能ですか? ?](https://css-tricks.com/flexbox-tightly-align-last-row/)

ただし、フレックスボックス、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;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

この CSS グリッド ソリューションを使用すると、複数の行に折り返される場合でも、柔軟なアイテムを同じ幅で簡単に配置できます。

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