flex 是什么？
flex是flexible box 的缩写，意为弹性盒子。
设置flex布局以后，子元素的float、clear、和vertical-align属性将失效。
一、flex 容器的属性
1. flex-direction 排列的方向
- row 默认值，主轴在水平方向，起点在左边
- row-reverse 主轴在水平方向，起点在右边
- column 主轴在垂直方向，起点在上沿
- column-reverse 主轴在垂直方向，起点在下沿
2. flex-wrap 控制换行
- nowrap 默认, 不换行
- wrap 换行, 第一行在上方
- wrap-reverse 换行，第一行在下方
3. flex-flow 是 flex-direction 和 flex-wrap 属性的简写形式，默认值为 row nowrap
4. justify-content 定义了子元素在主轴上的对齐方式
- flex-start 默认值, 左对齐
- flex-end 右对齐
- center 居中对齐
- space-betweent 两端对齐, 每根轴线之间间隔相等
- space-around 每根轴线的两侧间隔相等
5. align-items 定义了子元素在交叉轴上的对齐方式
- flex-start 交叉轴起点对齐
- flex-end 交叉轴终点对齐
- center 交叉轴中点对齐
- baseline 子元素的第一行文字的基线对齐
- stretch 默认值, 如果给子元素设置高度或设为auto, 将占满整个容器的高度
6. align-content 定义了有多行时交叉轴的对齐方式, 单行时不起作用
- flex-start 与交叉轴的起点对齐
- flex-end 与交叉轴的终点对齐
- center 与交叉轴的中点对齐
- space-betweent 交叉轴两端对齐, 每根轴线之间间隔相等
- space-around 每根轴线的两侧间隔相等
- stretch 默认值, 轴线占满整个交叉轴
子元素的属性
1. order
定义了子元素的排列顺序, 数值越小越靠前,默认为0,
2. flex-grow
定义了子元素的放大比例, 默认为0, 如果空间有剩余，也不放大
3. flex-shrink
定义了子元素的缩写比例, 默认1, 如果空间不足, 该子元素将缩小; 如果为0, 则不缩小
4. flex-basis
定义在分配多余空间之前, 子元素占据的主轴空间。 默认值为auto, 既子元素本来大小。它可以设置跟width和height属性一样的值(比如350px), 则子元素将占据固定空间。
5. flex
是flex-grow、flex-shrink、flex-basis的简写, 默认值为0 1 auto. 后两个属性可选。该属性有两个快捷键 auto(1 1 auto) 和none(0 0 auto).
6. align-self
允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。
- auto 默认值, 继承父元素的align-items
- flex-start
- flex-end
- center
- baseline
- stretch
