flex 布局

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 多行/ 多列内容对齐方式

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 自身的对齐方式

最后

一个关于 flex 的小游戏

参考：

阮一峰： Flex 布局教程：语法篇
深入理解flex布局的flex-grow、flex-shrink、flex-basis