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

这个用的较少，定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
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 |

最后

一个关于 flex 的小游戏

参考 ：

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