flex 布局

flex-direction 调整主轴方向(默认水平)

• row 、column、row-reverse、column-reverse

justify-content

• 调整主轴对齐方式 flex-start/flex-end/center/space-around/space-between

align-items 调整侧轴对齐方式

• flex-start、flex-end/center/stretch

flex-wrap

• 控制是否换行 wrap/nowrap

align-content 对flex-wrap:wrap 产生的换行控制

• flex-start/flex-end/center/space-between/space-around/stretch

flex 控制比例

• flex: 1/flex: 2

align-self 可覆盖父元素设置的 align-items

• flex-start/flex-end/center/stretch

order 控制顺序