FLex 弹性布局
以下文章主要参考了阮一峰老师的文章《Flex 布局教程：语法篇》
并加了一些我自己的心得体会。
弹性布局是W3C在2009年提出的一种新方案，可以便捷、响应式的完成各种页面布局。目前已经得到所有浏览器的支持，而且各大厂商，知乎等都已经正式使用了 。
概念
Flex 就是 flexible box 的缩写，意为弹性布局，用来为盒子模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局，行内元素也可以：display: inline-flex,并且设置为flex布局以后，子元素的float、clear、vertical-align属性将失效。
采用flex布局的元素，称为flex容器，他的所有子元素自动成为容器成员，称为flex项目。
容器默认存在两根主轴：main axis（水平主轴） 和 cross axis (垂直交叉轴)。
弹性布局就是通过调整主体和容器成员各轴线属性，及排列关系的布局方法。
我理解中：弹性布局主要通过浏览器本地计算能力完成布局，开发者只需要提供一些模糊位置描述，因而简化了开发过程。
主体基本属性
flex-direction : 决定主轴的方向
flex-wrap： 决定超出屏幕宽度时如何换行
flex-flow： 是 flex-wrap 和 flex-direction 的缩写形式
justify-content ：属性定义了项目的主轴容器成员的对其方式
align-items : 定义在交叉轴上如何对其
align-content : 定义多根轴线的对其方式，只有一根时不起作用
flex-direction
可选值：
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap
可选值：
- nowrap 不换行
- wrap 换行
- wrap-reverse 换行后，倒序排列，开始行在最下方，
flex-flow
语法：
- flex-flow: flex-diretion || flex-wrap;
justify-content
可选值：
- flex-start 向开始靠齐
- flex-end 向结束靠齐
- center 居中
- space-between 两端对齐，项目之间的距离都相等
- space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
align-tiem
可选值：
- flex-start 交叉轴上起点对齐
- flex-end 交叉轴上向终点对齐
- center 交叉轴的终点对齐
- baseline 项目中的第一行文字的基线对齐
- stretch 如果项目未设置高度活设为auto，将占满整个容器的高度
align-centent
可选值：
- flex-start 与交叉轴的起点对齐
- flex-end 与交叉轴的终点对齐
- center 与交叉轴的中点对齐
- space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around 轴线之间的间隔都相等
- stretch 轴线占满整个交叉轴
容器项目属性
- order 定义项目的排列顺序，数值越小，排列越靠前，默认为0；
- flex-grow 定义项目的放大比例，默认为0，即使存在剩余空间，也不放大。
- flex-shrink 定义项目的缩小比例，默认为1，即空间不足会缩小
- flex-basis 定义了分配多余空间之前，项目占据了主轴空间的大小
- flex 是上述3个属性的缩写
- align-self 规定单个项目与其他项目不一样的对齐方式，可覆盖容器的align-items属性