flex 布局特点
- 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局与方向无关
- flex布局可以实现空间自动分配，自动对齐
- flex 布局适用于简单的线性布局，更复杂的用 grid 布局
- 行内元素也可以用flex布局：
display: inline-flex;
几个基本概念
- main axis： 主轴 （由方向决定）
- cross axis： 侧轴
- main size： 主尺寸
- cross size： 侧尺寸
- main start： 主轴起点
- main end： 主轴终点
- cross start： 侧轴起点
- cross end： 侧轴终点
- flex item： 子元素
- flex container： 父容器（就是设置display: flex 的容器）
flex container 的属性
1. flex-direction 方向
- row （从左到右）一行一行的展现
- row-reverse （从右到左）一行一行的展现（排列）
- column （从上到下） 一列列排列
- column-reverse （从下到上）一列列排列
2.flex-wrap 换行
flex-wrap: nowrap | wrap | wrap-reverse |
默认不换行（就算给父容器、子元素设置了宽高也没用），可以通过设置flex-wrap: wrap 来让它换行（给父元素设置）。
3. flex-flow 上面两个的简写
flex-flow 是flex-direction 和 flex-wrap的缩写，默认值为 row nowrap 。
4. justify-content 主轴方向的对齐方式
- space-between : 空间都放在中间
- space-around: 空间都均匀的放在周围
- flex-start: 都靠近起点
- flex-end: 都靠近终点
- center: 居中
5. align-items 侧轴对齐方式
- stretch ： 默认值 （只有这一种情况会伸展）
- flex-start ： 靠近起点
- flex-end ： 靠近终点
- center ： 居中
- baseline ： 文字的 baseline 对齐
6. align-content 多行/ 多列 内容对齐方式
这个用的较少，定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch |
flex item 的属性
1. flex-grow
增长比例（空间过多时），默认 0
2. flex-shrink
收缩比例（空间不够时）默认1 ，负值无效
TIPS:
MDN 中有这样一段描述：
By default flex items don't shrink below their minimum content size. To change this, set the item's min-width or min-height.
即默认情况下， flex item 内容的宽度（或高度）大于flex 容器的 宽度（或高度）时，flex-item 是不会再缩小了，也就是内容会溢出容器，如果要解决这个问题，给flex-item 设置最小宽度（或高度就好了）。
亲测有效：点这里
3. flex-basis
默认大小（一般不用） 可以指定大小，默认 auto
可以看下这篇文章：
深入理解flex布局的flex-grow、flex-shrink、flex-basis
4. flex
上面3 个的缩写
5. order
改变顺序（可以代替双飞翼布局） IE8 不支持
6. align-self item 自身的对齐方式
align-self 允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items属性，默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch |
最后
参考 ：
