FLEX语法及常见应用

六大属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

image.png

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap

nowrap

wrap

wrap

布局应用