我有一页充满了块，其中堆积着display: inline-block。我想让一些大四到两倍，所以我用了float: left or right放置其他块。
我的问题是如果我有五元素行，我怎样才能放一个更大的元素在中间它的？ （作为float自然地放在一边）。
这是一个示例片段：
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
</div>Here's what I would like to have from the snippet above 
您的子元素有固定的高度（.block）。根据这些信息，我们可以推断出容器的高度（#wrapper).
通过了解容器的高度，您可以使用以下方式实现布局CSS 弹性盒 with flex-direction: column and flex-wrap: wrap.
容器上的固定高度用作断点，告诉弹性项目在哪里换行。
#wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 120px;
width: 516px;
}
.block {
width: 90px;
flex: 0 0 50px;
margin: 5px;
background-color: red;
}
.bigger {
flex-basis: 110px;
}<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>以下解释了为什么弹性项目无法换行，除非容器上有固定的高度/宽度：https://stackoverflow.com/a/43897663/3597276