我有一个满是块的页面，这些块用display:inline-block堆积起来。 我想使一些块大四到两倍，所以我使用float:left或right来放置其他块。
我的问题是，如果我有一个五元素行，我怎么能在它中间放一个更大的元素呢？ （如float将其自然地放在侧面）。
下面是一个示例片段:
null
#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>null
您的子元素(.block)具有固定的高度。 基于该信息，我们可以外推容器的高度(#wrapper)。
通过知道容器的高度，可以使用CSS Flexbox和flex-direction:column以及flex-wrap:wrap来实现布局。
容器上的固定高度用作断点，告诉flex项在哪里包装。
null
#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>
为了让您的布局与flexbox一起工作，您需要使用嵌套容器，或者知道容器的高度（请参阅本页我的另一个答案）。 网格就不是这样了。 代码结构非常简单。
null
#wrapper {
display: grid; /* 1 */
grid-template-columns: repeat(5, 90px); /* 2 */
grid-auto-rows: 50px; /* 3 */
grid-gap: 10px; /* 4 */
width: 516px;
}
.bigger {
grid-row: 1 / 3; /* 5 */
grid-column: 2 / 3; /* 6 */
}
.block {
background-color: red;
}<div id="wrapper">
<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 class="block"></div>
</div>