BinaryDevelop
  1. ホーム
  2. html

[解決済み] フレックスボックス 1列4点

2022-02-16 23:31:34

質問

フレックスボックスを使用して、ページに合わせて動的にサイズ変更される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>

解決方法は？

あなたが持っているのは flex-wrap: wrap をコンテナに追加しました。これは良いことです。なぜなら、デフォルト値である nowrap ( ソース ). でアイテムが折り返されてグリッドを形成しないのは、このためです。 いくつかの場合 .

この場合、主な問題点は flex-grow: 1 をフレックスアイテムに追加しています。

は flex-grow プロパティは、実際にはフレックスアイテムのサイズを調整するものではありません。その仕事は、コンテナ内の空きスペースを分配することです ( ソース ). そのため、画面サイズがどんなに小さくても、各項目は行の空きスペースのうち、割合に応じた部分を受け取ることができる。

具体的には、コンテナの中に8つのフレックスアイテムがあります。とは flex-grow: 1 のように、それぞれが行の空きスペースの1/8を受け取ります。アイテムの中にはコンテンツがないので、幅をゼロに縮めることができ、折り返すことはありません。

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

.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 で定義されている flex を使用する必要はありません。 flex-basis を25%にすると、実際には余白の関係で1行に3つの項目が入ることになります。

以来 flex-grow は、行の空き領域を消費します。 flex-basis は、ラップを強制するのに十分な大きさであればよい。この場合 flex-basis: 21% 余白には十分なスペースがありますが、5つ目の項目を置くスペースはありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します