三、flex容器属性

三、flex容器属性

flex-direction 决定主轴方向=项目排列方向

flex-wrap 定义如何换行

flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖

justify-content 定义项目在主轴上的对齐方式

align-items 定义项目在交叉轴上的对齐方式

align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值：

row(默认值) 主轴为水平方向，起点在左端

row-reverse 主轴为水平方向，起点在右端

column 主轴为垂直方向，起点在左端

column-reverse 主轴为垂直方向，起点在右端

2.flex-wrap值：

nowrap(默认) 不换行

wrap 换行，第一行在上方

wrap-reverse 换行，第一行在下方

默认情况，所有flex项目会排在一条线上，不会自动换行

3.flex-flow默认值：row nowrap

.box {

flex-flow: <flex-direction> <flex-wrap>;

}