Flex布局交叉轴方向弹性比例控制问题


/* 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; */
}
Flex布局交叉轴方向弹性比例控制问题_第1张图片
效果图

align-content的默认值是stretch.root样式默认把剩余的空间分配给两列,尽管第一列是固定宽度的,所以就会出现图示的空隙。而.box3align-self不知道为什么不能够覆盖align-content设定的值,目前没有办法指定交叉轴的growshrinkbasis等属性。

Chrom版本:Version 63.0.3239.84 (Official Build) (64-bit)
Safari版本:Version 11.0.2 (13604.4.7.1.3)

你可能感兴趣的:(Flex布局交叉轴方向弹性比例控制问题)