☰

Flexbox: 1行あたり4項目 質問する

tag-icon • tag-icon html css flexbox
Flexbox: 1行あたり4項目 質問する

フレックス ボックスを使用して、ページに合わせてサイズが動的に変更される 8 つのアイテムを表示しています。アイテムを 2 行に分割するにはどうすればよいでしょうか (1 行あたり 4 つ)?

関連する抜粋を以下に示します。

（またはjsfiddleを好む場合は -http://jsfiddle.net/vivmaha/oq6prk1p/2/）

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

ベストアンサー1

flex-wrap: wrapコンテナに入っています。これはデフォルト値を上書きするので良いことですnowrap。ソース）。これが、アイテムがグリッドを形成するために折り返されない理由です。ある場合。

この場合、主な問題はflex-grow: 1フレックス項目にあります。

このflex-growプロパティは、実際にはフレックスアイテムのサイズを決めるものではありません。コンテナ内の空きスペースを分配することがその役割です（ソース）。したがって、画面サイズがどれだけ小さくても、各項目は行の空きスペースの比例部分を受け取ります。

具体的には、コンテナ内に 8 つの flex アイテムがあります。 ではflex-grow: 1、各アイテムは行の空きスペースの 1/8 を受け取ります。アイテムにはコンテンツがないため、幅が 0 に縮小され、折り返されることはありません。

解決策は、アイテムの幅を定義することです。これを試してください:

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

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

flex-grow: 1ショートカットで defined を使用するとflex、 を 25% にする必要はありませんflex-basis。そうすると、余白により、実際には行ごとに 3 つの項目が表示されます。

flex-growは行の空き領域を消費するため、flex-basisは折り返しを強制するのに十分な大きさで十分です。この場合、 ではflex-basis: 21%余白には十分な領域がありますが、5 番目の項目には十分な領域がありません。

おすすめ記事