<!-- HTML -->
<div class="root">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
/* CSS */
.root {
border: solid 1px gray;
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* align-content: flex-start; */
}
.box1 {
border: solid 1px red;
width: 120px;
height: 150px;
}
.box2 {
border: solid 1px green;
width: 120px;
flex: 1;
}
.box3 {
border: solid 1px blue;
min-height: 170px;
flex: 1;
/* align-self: stretch; */
}
效果图
align-content的默认值是stretch，.root样式默认把剩余的空间分配给两列，尽管第一列是固定宽度的，所以就会出现图示的空隙。而.box3的align-self不知道为什么不能够覆盖align-content设定的值，目前没有办法指定交叉轴的grow、shrink、basis等属性。
Chrom版本：Version 63.0.3239.84 (Official Build) (64-bit)
Safari版本：Version 11.0.2 (13604.4.7.1.3)
