Question

我正在学习Flexbox，希望将其用于遇到的问题。

基本上，我有3列和多行。它们具有相同的大小，除了第一行placement中的最后一列。这是动态的，尽管宽度不会改变，但高度会改变。

问题：

当placement div的高度相同时，我希望所有列都环绕它。因此，基本上该行将具有3列。但是，如果placement div的高度不同，则下一行的所有列都不会换行，因此每行只有2列。

我尝试过的内容：

我尝试更改placement div的高度，希望flexbox可以对其他列重新排序。

我尝试使用flex-grow，但这也不起作用。

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
  justify-content: center;
}

.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 220px;
}

.placement {
  border: 2px solid red;
   margin: 0 15px 30px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 500px;
}
.filler {
  border: 1px solid transparent;
  margin: 0 15px 0px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 0px;
  }

<div class="container">
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="placement"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
</div>

这甚至可以在flexbox中做到吗？

编辑：

请参阅：http://jsfiddle.net/nLqkrax5/9/

当第三个div达到此大小时，我想使网格变得流畅，以便其他列仅环绕该div，而不是在具有特殊高度的div周围没有巨大的空白。

Flexbox-基于特定列的高度的流体网格

0 个答案: