flex布局详细解析

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

1： flex-start：与交叉轴的起点对齐。
2： flex-end：与交叉轴的终点对齐。
3： center：与交叉轴的中点对齐。
4： space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5：space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6：stretch（默认值）：轴线占满整个交叉轴。

order决定了flex items的排布顺序。

1：可以设置任意整数(正整数 负整数 0) ，值越小，就越排在前面
2：默认值为0

.item1 {
    background-color: sienna;
    order: 18;
}

.item2 {
    background-color: navy;
    order: 2;
}

.item3 {
    background-color: aquamarine;
    order: 99;
}

align-self属性

 flex items可以通过align-self覆盖flex container中设置的align-items。

1：默认值为auto，遵从flex container的align-items设置
2：stretch、flex-start、flex-end、center、baseline效果与align-items一致

flex-grow 属性

定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

flex-shrink属性

flex-shrink的默认值是1
flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。
flex-shrink: 2;如果设置为2 则表示按比例缩小 ，值越大 按比例缩的就越小

flex-basis属性

设置了flex-basis width就不管用了 同时存在的时候，优先使用flex-basis flex-basis定义最小空间，默认值为auto，即自身的本来大小。