优点
1、宽容度高。2、需要100%还原设计稿。
基本样式
我们可以将flex看成一个盒子，有两种轴，一个是main axis(默认水平主轴)，另一个是cross axis(垂直交叉轴)，盒子里面装的是item，items按照轴方向排列。
语法
- 块元素：display:flex;
- 行内元素：display:inline-flex;
属性
flex-direction 主轴方向
- flex-direction:row; 默认水平，从左到右
- flex-direction:row-reverse; 反方向，从右到左
- flex-direction:column; 垂直方向，，从上到下
- flex-direction:column-reverse; 反方向，从下到上
flex-wrap item换行
- flex-wrap:nowrap; 默认不换行
- flex-wrap:wrap; 换行
- flex-wrap:wrap-reverse; 换行，但是顺序是第一行在下面，倒序排上来
上面两个的属性可以简写成：flex-flow=flex-direction+flex-wrap，flex-flow：row nowrap;如只写了一个值的时候，另一个值为默认情况。
justify-content 在主轴上的对齐方式
- justify-content:flex-start; 左对齐
- justify-content:flex-end; 右对齐
- justify-content:center; 居中对齐，item的间距相等
- justify-content:space-between; 两端对齐，填满整个父元素的长度（顶到父元素的padding），
- justify-content:space-around; 元素的左右间距一样，但是和到边框的距离不一样，两个元素之间有两个间距，受margin影响
- justify-content:space-evenly; 元素到边框，和元素之间的距离，都相等，受margin影响
align-items 轴线的对齐方式
- align-items:flex-start; 默认起点对齐
- align-items:flex-end; 终点对齐
- align-items:center; 中点对齐
- align-items:baseline; 以第一行的文字设置的line-height对齐
- align-items:stretch; 默认值，当未设置item的高度时，自动填满
align-content 多根轴线的对齐方式
- align-content:flex-start; 起点对齐
- align-content:flex-end; 终点对齐
- align-content:center; 居中对齐
- align-content:space-between; 两端对齐
- align-content:space-around; 所有间距相同
- align-content:stretch; item不设置高度时或者高度auto时，轴线占满整个交叉轴 我们可以利用右键检查工具来更便捷的查看不同属性值的效果：
align-self 对子元素单独设置对齐方式（在多根轴线的情况下无效）
flex-grow 放大子元素比例 可以分配剩余空间（若是换行，则看不出效果）
- 数值默认为0；
- 数值为1时，单独指定某元素，该元素自动填满盒内剩余空间（轴内的空间，水平轴上就是填满宽度，垂直轴就是填满高度）；
- 数值为1时，用在所有元素上，则将该轴平均分配空间。
flex-shrink 元素是否被压缩
- 数值为1时，默认被压缩；
- 数值为0时，不被压缩，保持设定的尺寸。
可以看到第一个例子，三者都是默认被压缩，所以宽度400px的item挤在宽度600px的盒子，而第二个例子中，2号指定了flex-shrink:0;不被压缩，所以2号是原始400px宽度，1号和3号则被挤在两边。
flex-basis 指定宽度
优先级高于width，同时设置width和flex-basis时，元素认定flex-basis的数值，但是若宽度不够，仍然会被flex-shrink:1；默认被压缩。
flex的简写
- flex:flex-grow flex-shrink flex-basis;(占满 压缩 指定)；
- flex:1;元素平均分配空间或者占满剩余空间。
