Flex@R_987_2419@不喜欢在多列或多行中扩展的flex项目，因为实际上flex@R_987_2419@没有网格概念。
但是，使用一些技巧，您可以实现此布局（以及更复杂的布局）：
使用行布局
┌─┬─┬─┬─┐
│1│2│3│4│ └─┴─┴─┴─┘
使用允许换行flex-wrap: wrap。
使用伪元素在2之后强制换行
┌─┬─┐
│1│2│ ├─┼─┤ │3│4│ └─┴─┘
使用flex: 1上的所有Flex项目。
┌─────────┬─────────┐
│1 │2 │ ├─────────┼─────────┤ │3 │4 │ └─────────┴─────────┘
设为margin-left: 50%3
┌─────────┬─────────┐
│1 │2 │ └─────────┼────┬────┤ │3 │4 │ └────┴────┘
设置height: 200px为2、3和4。设置height: 400px为1。
┌─────────┬─────────┐
│1 │2 │ │ ├─────────┘ │ │ └─────────┼────┬────┐ │3 │4 │ └────┴────┘
设置margin-bottom: -200px为1：
┌─────────┬─────────┐
│1 │2 │ │ ├────┬────┤ │ │3 │4 │ └─────────┴────┴────┘
由于您有边框，因此请@R_987_2419@-sizing: border-@R_987_2419@在所有框上使用以height包含边框。否则需要1 height: 416px; margin-bottom: -216px。
注意flex@R_987_2419@ auto作为的新初始值引入min-width。这样可以使内容迫使某些盒子增长。这会破坏布局，因此请使用min-width: 0或将设置overflow为，将其禁用visible。
这是代码：
.features {
display: flex;
flex-flow: row wrap;
}
.feature {
background: #ccc;
border: 8px solid #fff;
height: 200px;
@R_987_2419@-sizing: border-@R_987_2419@;
min-width: 0;
flex: 1;
}
.feature-1 {
/* Make it taller without increasing the height of the flex line */
height: 400px;
margin-bottom: -200px;
}
.features:after {
/* Force line break */
content: '';
width: 100%;
}
.feature-2 ~ .feature {
/* Place 3 and 4 after the line break */
order: 1;
}
.feature-3 {
margin-left: 50%;
}
<div class="features">
<div class="feature feature-1">1</div>
<div class="feature feature-2">2</div>
<div class="feature feature-3">3</div>
<div class="feature feature-4">4</div>
</div>
但是，修改HTML以具有嵌套的flex@R_987_2419@会更容易。
#wrapper {
height: 400px;
}
.flex {
display: flex;
}
.column {
flex-direction: column;
}
.flex > div {
min-width: 0;
flex: 1;
}
.item {
background: #ccc;
border: 8px solid #fff;
}
<div id="wrapper" class="flex row">
<div class="item">1</div>
<div class="flex column">
<div class="item">2</div>
<div class="flex row">
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
</div>
602392714
清零编程群