CSS3: flex

弹性布局 flexible box

基本概念：
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
容器的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器存在两根轴：主轴（main axis）和交叉轴（cross axis）。

容器属性：

flex-direction：主轴方向

• row ：水平 从左到右 默认
• row-reverse： 水平 从右到左
• col：垂直 从上到下
• col-reverse：垂直 从下到上

flex-wrap：项目换行规则

• nowrap ：不换行 默认
• wrap： 换行
• wrap-reverse：换行 从下到上

justify-content：主轴对齐方式

• flex-start: 主轴开始方向对齐 默认
• flex-end：主轴结束方向对齐
• center：沿主轴居中对齐
• space-between：沿主轴两端对其
• space-around：沿主轴对其，每个项目两侧间距相等切不重叠

align-items：交叉轴对齐方式

• stretch：如果项目没有限制高度，将拉伸至占满主轴 默认
• flex-start: 交叉轴开始方向对齐
• flex-end：交叉轴结束方向对齐
• center：沿交叉轴居中对齐
• baseline：项目第一行文字基线 ？？？

align-content：？？？

项目属性

order：项目排序

• 0：越小越靠前 默认
• 1：后移一位
• -1：前移一位
• …

flex-grow：项目放大比例

• 0：不放大 默认
• 1：放大比例为1
• …

该属性用于容器中存在剩余空间时设置项目之间相对比例，例如容器中有三个项目，flex-grow分别为0、1、1，则第一个项目不放大，后两个项目放大至平分剩余空间沾满容器；如果flex-grow分别为1、1、2，则前两个项目放大至相同尺寸，第三个项目时前两个项目尺寸的2倍占满容器

flex-shrink：项目收缩比例

• 1：收缩比例为1 默认
• 0：不收缩
• …

该属性用于容器中空间不足时设置项目之间相对比例，例如容器中有三个项目，flex-shrink分别为0、1、1，则第一个项目不缩放，后两个项目缩放至平分剩余空间沾满容器，与flex-grow用法类似

flex-basis：项目占据主轴空间

• auto：项目原本尺寸 默认

该属性用于计算容器主轴是否存在剩余空间，在容器分配剩余空间之前， 利用该属性值作为项目占据的主轴空间尺寸，设置之后项目将为固定尺寸

align-self：单独设置项目交叉轴对齐方式

• auto：容器设置的align-items 默认

该属性的值与align-items相同，用与单独设置项目交叉轴对齐方式，允许与容器align-items不同。