Description
flex 布局应该是现在开发中用到最多的了，它是一种一维布局，当设置 display: flex | inline-flex 后，就可以把元素看做是一个容器，容器里的每一项称作 flex 子项。对于 flex 来说，有 主轴 和 交叉轴 两个概念，主轴就是水平方向上的横线，而交叉轴垂直于主轴，因而是垂直方向上的。其中主轴可通过 flex-direction 属性设置。
flex 属性
flex 的属性可以分为两类，一类是作用于整个 容器 的，另一类是作用于容器里的 每一个子项 的。作用于容器的属性主要有：
flex-direction
控制容器的布局方向，是从左往右，还是从右往左或从上往下，主要取值有：
row: 默认值，按正常文档流方向是从左往右排列元素row-reverse: 与row方向相反column: 把元素显示成列，有点类似 block 的效果column-reverse: 方向与 column 相反
flex-wrap
控制子元素是单行显示还是换行显示。取值有：
no-wrap: 默认值，不换行wrap: 换行显示wrap-reverse: 换行显示，且从下往上排列元素
flex-flow
这个属性是flex-direction和flex-wrap的缩写，如：flex-flow: row wrap
justify-content
控制水平方向上元素的对齐和排列方式，主要取值有：
flex-start: 按正常文档流，表现为左对齐flex-end: 按正常文档流，表现为右对齐center: 居中对齐，这个平时开发最常用space-between: 两端对齐，左右两侧不留间隙space-around: 类似两端对齐，但是左右两侧是留有空间的，且空间是中间空闲部分的一半space-evenly: 每个子元素左右两侧均匀平分
align-items
控制垂直方向上元素的对齐和排列方式，主要取值有：
stretch: 子项高度拉伸flex-start: 按正常文档流，表现为顶部对齐flex-end: 按正常文档流，表现为底部对齐center: 居中对齐，常用于垂直居中baseline: 所有子元素相对于基线对齐，所谓基线就是指字母x的下边缘
align-content
这个属性与 align-items 的区别在于 多行，它控制的是垂直方向上每一行子项的对齐和排列方式。主要取值有：
stretch: 默认值，每一行都等比例拉伸flex-start: 多个元素顶部对齐flex-end: 多个元素底部对齐center: 整体垂直居中space-between: 上下两行两端对齐，中间元素平分space-around: 每一行元素上下都有独立不重叠的空间space-evenly: 每一行元素上下平分
作用于 flex 子项的属性有：
order
这个属性主要是改变子元素的排列位置，取值是整数，默认为 0，排序按从小到大来排。比如 order 为 -1 要比 order 为 1 靠前。
order: 0
order: -1
flex-grow
这个属性用来规定每个子项是否扩展剩余空间，取值可以是小数也可以是整数，默认是 0，表示即使存在剩余空间也不扩展。
flex-grow: 1
flex-shrink
规定当剩余空间不足的时候，子项是否收缩。它的取值是数值，默认是 1，表示收缩，如果设置 0 ，那它就显示这个子项应有的宽度，不会收缩。
flex-shrink: 0
flex-basis
定义每个子元素的初始大小，默认取值是 auto，意思是有设置宽度就按设置的来，没有就按元素实际占据的空间显示。
flex
这个属性是flex-grow，flex-shrink和flex-basis的缩写，也是平时开发经常用的，一般推荐使用缩写属性，让浏览器去自动计算其它值，而不是显式指定每一个 flex 属性。
align-self
控制某个子项垂直方向单独的对齐方式，它的取值与 align-items 一样，只不过一个是针对所有 items，一个是针对单独的 item。
align-self: auto | flex-start | flex-end | center | baseline | stretch
flex 应用
使用 flex ，主要就是对 flex 这个属性的几个值了解熟悉。下面列举了 flex 的几个常用值：
flex: initial: 等同于flex: 0 1 auto是 flex 属性的默认值。它表示有剩余空间也不扩展元素，但是空间不足时会收缩元素，至于元素尺寸，则自适应实际占据的内容宽度。适用于一侧宽度固定，另一侧内容自动的两栏自适应布局flex: 0：等同于flex: 0 1 0%，表现为元素不会扩展，但空间不足时会收缩，尺寸大小为最小内容宽度，效果就是文字竖排成一列，挤在一起。flex: none等同于flex: 0 0 auto，表现为元素既不会收缩也不会扩展，元素尺寸为最大内容宽度。设置后的效果是：元素会无视容器宽度显示，不换行的一直显示到底，因此可能会溢出容器。它比较适合一些失去弹性的场景，比如一个列表，左侧是文字图片，右侧是一个按钮，我们希望这个按钮里的文字不要换行，且不被左边积压，就可以对按钮设置flex: noneflex: 1：等同于flex: 1 1 0%，表现为元素既可以扩展，也可以收缩，元素尺寸大小表现为最小内容宽度，也就是当宽度不足时，文字会换行显示。这个适用于等分布局flex: auto: 等同于flex: 1 1 auto，表现为元素既可以扩展，也可以收缩，当内容空间不足时，元素会向外扩展，占据更多空间，也就是会抢占其它子项的空间。它的应用场景：网页导航栏，因为导航栏经常是几个子项，但是每个子项里的文字数量不固定，使用flex:auto就可以实现按照内容自动分配宽度。