Flex弹性布局

CSS 弹性盒子布局定义了一种针对用户界面设计而优化的 CSS 盒子模型。 Flex弹性布局为W3C在2009年提出的方案，如今大部分浏览器的支持都支持Flex弹性布局的使用，被广泛应用。

以下介绍它的一些属性。

容器属性

flex-wrap 控制是否能换行

nowrap 不允许换行 wrap 允许换行 wrap-reverse 换行内容出现在上边

flex-direction 设置主轴方向

row 行 column 列 row-reserver 右->左 column-reserver 下->上

flex-flow flex-direction和flex-wrap的简写方式

justify-content 主轴方向上的内容排列方式

center 居中排列 flex-start 主轴开始处开始排列 flex-end 主轴末尾处开始排列 分配剩余空间： space-between 两边对齐 space-around 围绕子元素 space-evenly 平均分布

align-items 单行内容在侧轴上的排列方式

stretch 元素被拉伸以适应容器 center 居中 flex-start flex-end

align-content 多行内容在侧轴上的排列方式

center 居中排列 flex-start 主轴开始处开始排列 flex-end 主轴末尾处开始排列 分配剩余空间： space-between 两边对齐 space-around 围绕子元素

项目属性

order 控制元素在弹性布局中的位置（默认为0，值越大排列越靠后）

align-self 控制元素自身在交叉轴（侧轴）的排列方式

center 居中 flex-start 从头放置 flex-end 从尾放置 baseline 基线

flex-grow 剩余空间的分配比例基数（0不分配，1或其他按比例分）

flex-shrink 当空间不足需要压缩时压缩的基数（默认为1，为0时不压缩，当无法压缩时多余部分会溢出）

flex-basis 当产生空间分配时，元素所占初始大小（默认auto）

flex grow、shrink、basis三个属性的合并（默认值：0 1 auto）