Flexbox不喜欢在多列或多行中扩展的flex项目，因为实际上flexbox没有网格概念。
但是，使用一些技巧，您可以实现此布局（以及更复杂的布局）：
使用行布局
┌─┬─┬─┬─┐
│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 │
└─────────┴────┴────┘由于您有边框，因此请
box-sizing: border-box
在所有框上使用以height
包含边框。否则需要1height: 416px; margin-bottom: -216px
。注意flexbox
auto
作为的新初始值引入min-width
。这样可以使内容迫使某些盒子增长。这会破坏布局，因此请使用min-width: 0
或将设置overflow
为，将其禁用visible
。
这是代码：
.features { display: flex; flex-flow: row wrap;}.feature { background: #ccc; border: 8px solid #fff; height: 200px; box-sizing: border-box; min-width: 0; flex: 1;}.feature-1 { height: 400px; margin-bottom: -200px;}.features:after { content: ''; width: 100%;}.feature-2 ~ .feature { order: 1;}.feature-3 { margin-left: 50%;}<div > <div >1</div> <div >2</div> <div >3</div> <div >4</div></div>但是，修改HTML以具有嵌套的flexbox会更容易。
#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" > <div >1</div> <div > <div >2</div> <div > <div >3</div> <div >4</div> </div> </div></div>
