css 弹性盒子 flex 的使用
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
CSS3引入了一种新的布局模型—— flex 布局。flex是 flexible box 的缩写，一般称之为弹性盒模型。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕。
基本概念
要让一个元素变成伸缩容器，需要使用 display 属性。采用 flex 布局的元素，称为伸缩容器 (flex container) ，容器内的子元素称为伸缩项目 (flex item)。
使用 flex 布局以后，需要注意 float、clear 和 vertical-align 属性在伸缩项目上没有效果。
弹性盒模型的两种容器块级伸缩容器和内联伸缩容器（display: flex | inline-flex;）的区别类似于 block 和 inline-block 的区别，一个独占一行，另一个非独占一行。
伸缩容器
有以下6个属性作用在伸缩容器上：
flex-direction
主轴的方向（即项目的排列方向）
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap
如果一条轴线排不下，如何换行
- nowrap（默认值）：不换行，伸缩项目在一行内等均分配
- wrap：换行
- wrap-reverse：反向换行
flex-flow
属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。
justify-content
伸缩项目在主轴上的对齐方式
- flex-start（默认值）左对齐
- flex-end 右对齐
- center 水平居中对齐
- space-between 两端对齐
- space-around 扩散对齐
align-items
伸缩项目在侧轴上的对齐方式
- stretch（默认值）伸缩项目将拉伸充满整个容器高度
- flex-start 顶部对齐
- flex-end 底部对齐
- center 垂直居中对齐
- baseline 伸缩项目与第一行文字的基线对齐
align-content
堆栈伸缩行
伸缩项目
有以下6个属性设置在伸缩项目上
order
属性定义伸缩项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow
属性定义伸缩项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
如果所有伸缩项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。
如果一个伸缩项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
属性定义了伸缩项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
如果所有伸缩项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。
如果一个伸缩项目的 flex-shrink 属性为 0，其他伸缩项目都为 1，则空间不足时，前者不缩小。
flex-basis
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
flex
属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
该属性有两个快捷值： auto (1 1 auto) 和 none (0 0 auto) 。
align-self
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch (充满整个容器)。
