主轴方向

flex-direction: row;

• 主轴默认水平方向

flex-direction: row-reverse;

• 水平反方向

flex-direction: column;

• 主轴转换为垂直方向 ------列

flex-direction: column-reverse

• 垂直反方向

Flex盒子换行

flex-wrap: nowrap;

• 默认不换行

flex-wrap: wrap;

多行侧轴对齐

属性

• align-content

元素设有 flex-wrap: wrap 的属性时使用

align-content: stretch;

• 默认值 子元素的高度被拉伸

align-content: flex-start;

• 主轴开始位置对齐

align-content: flex-end;

• 主轴结束位置对齐

align-content: center;

• 垂直居中对齐

align-content: space-between;

• 上下两端对齐

align-content: space-around;

• 子元素上下的间隙相同

align-content: space-evenly;

• 子元素之间的间隙相等