flex属性

一、什么是flex

flex分主轴（main axis）和交叉轴（cross axis），主轴是和盒子内部元素排列方向一致的。

flex item的main size是子元素占主轴的空间，并非宽度；cross size是子元素占交叉轴的空间，并非高度。

二、flex主轴方向与换行

flex-flow

作用：flex-direction和flex-wrap属性的简写形式

语法：flex-row：<flex-direction> || <flex-wrap

• flex-basis 设置后，宽度不再生效；伸缩基准值就是宽度

• flex-grow 有剩余空间才有用武之地。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

• flex-shrink 等于0时候不允许缩小，要有超出宽度才可用。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0