web-dev-qa-db-ja.com

flexbox子を異なる高さに設定して、使用可能なスペースを使い果たす

2列のflexboxレイアウトを使用して、すべての子が行の最も高い子の高さではなく、使用可能なすべてのスペースを埋めるために異なるサイズの子をどのように作成できますか？

jsbin で問題を説明するデモをセットアップしました。すべての子供たちがラップされたコンテンツのサイズになるようにしたいと思います。

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>
csscss3flexbox
35
verysuperfresh

これは、Flexbox行が動作することが期待される方法です。Flexboxは、純粋なCSSでMasonryを再作成するためのものではありません。/following row（列の向きを使用している場合は列についても同じです。align-itemsを使用して、列が伸びないようにすることができますが、それだけです：

http://cssdeck.com/labs/9s9rhrhl

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

それ以外の場合は、列の向きまたは複数列モジュールを使用する必要があります（これを参照してくださいSO answer： https://stackoverflow.com/a/20862961/1652962 ）

36
cimmanon