web-dev-qa-db-ja.com

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>
htmlcsshtml5css3flexbox
158
Vivek Maharajh

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

この場合、主な問題はフレックスアイテムのflex-grow: 1です。

flex-growプロパティは実際にはフレックスアイテムのサイズを決めません。その仕事は、コンテナー（ source ）内の空きスペースを分配することです。したがって、画面サイズがいくら小さくても、各項目にはライン上の空きスペースの比例部分が表示されます。

具体的には、コンテナには8つのフレックスアイテムがあります。 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速記でflex-grow: 1を定義した場合、flex-basisを25％にする必要はありません。実際には、マージンのために1行に3つの項目が含まれます。

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

214
Michael_B

.child要素に幅を追加します。あなたがそれを常に1行につき4にしたいのであれば、私は個人的にはmargin-leftのパーセンテージを使うでしょう。

_ demo _

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}
93
dowomenfart

これは別のやり方です。

あなたもこのようにしてそれを達成することができます：

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

.child{
  width: 25%;
  box-sizing: border-box;
}

サンプル： https://codepen.io/capynet/pen/WOPBBm

そしてより完全なサンプル： https://codepen.io/capynet/pen/JyYaba

34
Capy
<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<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>

それが役に立てば幸い。より詳しくはあなたはこれに従うことができます リンク

10
Muddasir Abbas

私はこれを好きなように負のマージンとcalcを使ってやります：

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: -10px;
  margin-left: -10px;
}

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

デモ： https://jsfiddle.net/9j2rvom4/ /

代替CSSグリッド方法：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

デモ： https://jsfiddle.net/jc2utfs3/ /

6
shanomurphy
.parent-wrapper {
        height: 100%;
        width: 100%;
        border: 1px solid black;
}
        .parent {
        display: flex;
        font-size: 0;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-bottom: -10px;
}
        .child {
        background: blue;
        height: 100px;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: calc(25% - 10px);
}
        .child:nth-child(even) {
        margin: 0 10px 10px 10px;
        background-color: Lime;
}
        .child:nth-child(odd) {
        background-color: orange; 
}
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">

        </style>
</head>
<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>
</html>

;）

2
Mateus Manosso Barszcz

この例はもっと基本的で、 理解しやすい それから@dowomenfartであると思います。

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

これは、肉にまっすぐにカットしながら同じ幅の計算を達成します。そのスケーラビリティと携帯性のため、数学はもっと簡単で、emは new standard です。

1
Joseph Cho

フレックスラップ+負のマージン

なぜフレックスとdisplay: inline-block？

なぜ負のマージン？

Edgeの場合（つまり、列の最初の要素）にSCSSまたはCSS-in-JSを使用するか、デフォルトのマージンを設定して、後で外側のマージンを取り除きます。

実装

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}
0
zurfyx