flex布局可以非常优雅简便的写出页面内的布局，十分简单灵活。而关于flex布局，其实主要又两个主要的部分，一个在父元素，一个在子元素，下面我们来主要讲一讲这两部分。
Flex容器
Flex是第一部分，代码主要以父元素为主。
在flex容器中默认存在两条轴线，主轴(main axis) 和交叉轴(cross axis)，默认水平轴为主轴，可以更改。在容器中每个单元被称之为flex item。
实现flex布局首先要指定一个容器，这样内部的元素就可以用来布局，我们需要给这个父元素添加dispaly: flex | inline-flex。（块级/行内）
.container {
display: flex;
}
需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
容器共有六种属性，属性及值如下：
flex-direction
决定主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-warp
决定容器内项目是否可换行
.container {
flex-warp: nowrap | wrap | wrap-reverse;
}
flex-flow
flex-direction和flex-wrap的简写形式
.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
定义了项目在主轴的对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items
定义了项目在交叉轴上的对齐方式
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content
定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用（用于flex-wrap为wrap时）
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
具体的属性值用法就不再多讲，可以参考下这篇文章30 分钟学会 Flex 布局 - 知乎 (zhihu.com)
Flex项目属性
这是flex的第二部分，代码用在 flex item 身上。
主要有六种属性可用：
order
定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
.item {
order: -2;
}
flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
默认值为 auto，设置了 flex-basis 之后，item 的宽度或者高度会失效（与主轴相关），width/height 优先级在 flex-basis 之后。
flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果
.item {
flex-basis: 200px | 30% | auto;
// 不可以为负值
}
flex-grow
定义项目在主轴的的放大比例
.item {
flex-grow: <number>;
}
默认值为0，即如果存在剩余空间，也不放大。
当所有的项目都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用了。
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话)
如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
定义项目在主轴的缩小比例
.item {
flex-shrink: <number>;
}
默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效。
当空间不足时，每个项目都会被等比例缩小，因为默认值为1
如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
flex
flex-grow, flex-shrink 和 flex-basis的简写
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。
有关快捷值：auto (1 1 auto) 和 none (0 0 auto)
关于 flex 取值，还有许多特殊的情况，可以按以下来进行划分：
- 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
- 当 flex 取值为 0 时，对应的三个值分别为 0 1 0%：
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
- 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
- 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
- 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：
.item {flex: 11 32px;}
.item {
flex-grow: 11;
flex-shrink: 1;
flex-basis: 32px;
}
建议优先使用这个属性，而不是单独写三个分离的属性。
grow 和 shrink 是一对双胞胎，grow 表示伸张因子，shrink 表示是收缩因子。
grow 在 flex 容器下的子元素的宽度和比容器和小的时候起作用。 grow 定义了子元素的尺寸增长因子，容器中除去子元素之和剩下的尺寸会按照各个子元素的 grow 值进行平分加大各个子元素上。
不管在什么情况下，在同一时间，flex-shrink 和 flex-grow 只有一个能起作用，这其中的道理细想起来也很浅显：空间足够时，flex-grow 就有发挥的余地，而空间不足时，flex-shrink 就能起作用。
align-self
允许单个项目有与其他项目不一样的对齐方式
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
这个跟 align-items 属性时一样的，只不过 align-self 是对单个项目生效的，而 align-items 则是对容器下的所有项目生效的。
