CSS布局之弹性布局
Flex(弹性布局)，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。
弹性布局由弹性容器(flex container)和弹性项目(flex item)组成。
在弹性容器中，水平方向称为主轴(main axis)(起点main start,终点main end)；垂直方向称为纵轴(cross axis)(起点cross start,终点cross end)。
在弹性项目中，元素的宽度称为main size，高度称为cross size。
弹性容器
通过display: flex属性，可将元素声明块级弹性容器；通过dsplay: inline-fex，可将元素声明为行内弹性容器。
- flex-direction属性
flex-direction指定主轴(main cross)的方向，即元素排列的方向。
// 需先声明为flex布局
flex-direction: row | row-reverse | column | column-reverse
// 属性解释：
row: 水平方向，从左往右
row-reverse: 水平方向，从右往左
column: 垂直方向，从上往下
column-reverse: 垂直方向，从下往上
- flex-wrap属性
flex-wrap属性，指定弹性项目的换行方式，即弹性项目超过一行时如何换行。
flex-wrap: no-wrap | wrap | wrap-reverse
// 属性解释：
no-wrap: 不换行(默认)
wrap: 正常换行
wrap-reverse: 换行，第一行在下方，从下往上换行
- flex-flow属性
flex-flow属性，为flex-direction和flex-wrap的合并属性。
// 第一个为flex-direction,第二个为flex-wrap
flex-fow: <flex-direction> <flex-wrap>
- justify-content属性
justify-content属性，指定弹性内容在主轴上的排列方式。
justify-content: flex-start | flex-center | flex-end | space-between | space-around
// 属性解释：
flex-start: 从主轴起点(main start)到主轴终点(main end)
center: 居中
flex-end: 从主轴终点(main end)到主轴起点(main start)
space-between: 项目周围的空间相等，但空隙会折叠
space-between: 项目周围的空间相等，但空隙不折叠
- align-items属性
align-items属性，指定弹性项目在纵轴上的对齐方向。
align-items: flex-start | center | flex-end | base-line | stretch
// 属性解释：
flex-start: 项目对齐纵轴的起点(cross start)
center: 居中
flex-end: 项目对齐纵轴的终点(cross end)
baseline: 基于基线对齐
stretch: 拉伸(默认)，从起点(cross start)到终点(croos end)
- align-content属性
align-content属性，指定当主轴(main axis)随项目换行时，多条主轴线如何对齐。
align-content: flex-start | center | flex-end | space-between | space-around | stretch
// 属性解释：
flex-start: 从纵轴起点(cross start)到终点(cross end)
center: 居中
flex-end: 从纵轴终点(cross end)到纵轴起点(cross start)
space-between: 项目周围的空间相等，但空隙会折叠
space-between: 项目周围的空间相等，但空隙不折叠
stretch: 拉伸(默认)，拉伸项目以布满纵轴长度
- 为什么没有justify-items属性呢？
尽管flex看起来像二维布局，但其实是个一维布局，纵轴(cross axis)没有换行(wrap)的行为，自然就没有justify-items属性。
弹性项目
尽管弹性容器已经有设置弹性项目的各种布局行为，但总有个别弹性项目需要自定义布局方式。
- order属性
order属性，指定弹性项目的排列序号，数值越小越靠前。
order: <integer>
- flex-grow属性
flex-grow属性，指定弹性项目在有空余空间的放大比例。
// 默认为0：表示即使有剩余空间也不放大
flex-grow: <number>
- flex-shrink属性
flex-shrink属性，指定弹性项目在空间不够时的缩小比例。
// 默认为1：表示空间不够时项目将缩小
flex-shrink: <number>
- flex-basis属性
flex-basis属性，指定弹性项目的基本长度。
flex-basis: <length>
- flex属性
flex属性，为flex-grow、flex-shrink和flex-basis的合并属性。
flex: flex-grow,flex-shrink,flex-basis
// 补充：
默认: 0,1,auto
auto: 1,1,auto
none: 0,0,auto
- align-self属性
align-self属性，指定弹性项目在纵轴上的对齐方式，将覆盖掉弹性容器的align-items属性。
align-self: auto flex-start | center | flex-end | base-line | stretch
// 属性解释：
auto: 自动
flex-start: 项目对齐纵轴的起点(cross start)
center: 居中
flex-end: 项目对齐纵轴的终点(cross end)
baseline: 基于基线对齐
stretch: 拉伸(默认)，从起点(cross start)到终点(croos end)
