flex布局flex取值以及align-self、align-content、align-items的区别
flex取值
flex是 flex-grow， flex-shrink，flex-basis 的缩写
| flex取值 | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 默认值 | 0 | 1 | auto |
| none | 0 | 0 | auto |
| auto | 1 | 1 | auto |
| 非负数字（例如flex:3） | 非负数字（3） | 1 | 0% |
| 长度或百分比（例如flex:3px或flex:10%） | 1 | 1 | 长度或百分比（3px或10%） |
| 两个非负数字（例如flex:3 7） | 前一个值（3） | 后一个值（7） | 0% |
| 一个非负数字，一个长度或百分比（例如flex:3 5px或flex:3 20%） | 非负数字（3） | 1 | 长度或百分比（5px或20%） |
在ie11上,flex:1会当成flex: 1 1 0px;其他浏览器当成flex:1 1 0%
如果flex-basis的值为百分数，且它flex容器的尺寸没有被显式设置，此时flex-basis的值会被解析为content。content 值会根据flex子项的内容（指flex子项的子元素尺寸）来计算实际尺寸，多数情况下效果与 max-content 值一致，就是说flex子项的子元素有多长其主轴初始值就有多长
参考文档：
flex：1代表什么意思
flex-grow属性
grow 在 flex 容器下的子元素的宽度和比容器和小的时候起作用。 grow 定义了子元素的尺寸增长因子，容器中除去子元素之和剩下的尺寸会按照各个子元素的 grow 值进行平分加大各个子元素上。
例如有父元素宽度剩余10,3个元素x1(宽10)、x2(宽20)、x3(宽30)
- 当子元素felx-grow之和大于0时，子元素的宽度为：
本身宽度+剩余宽度ｘ（flex-grow值/flex-grow值之和）
例如上述各自的felx-grow值为1,2,3，计算规则为：
6=1+2+3;
x1:10+10*(1/6)
x2:20+10*(2/6)
x3:30+10*(3/6)
- 当子元素felx-grow之和小0时，宽度为：本身宽度+剩余宽度ｘflex-grow，和felx-grow之和大于0相比，把flex-grow之和看成1就好了
例如上述各自的felx-grow值为0.1,0.2,0.3，计算规则为：
x1:10+10*(0.1/1)
x2:20+10*(0.2/1)
x3:30+10*(0.3/1)
flex-grow 还会受到 max-width 的影响。如果最终 grow 后的结果大于 max-width 指定的值，max-width 的值将会优先使用
flex-shrink 属性
flex-shrink属性定义空间不够时各个元素如何收缩
例如有父元素宽度溢出10,3个元素x1(宽10)、x2(宽20)、x3(宽30)
- 当子元素felx-grow之和大于0时，子元素的宽度为：
本身宽度-溢出宽度ｘ（flex-shrink值ｘ本身宽度/各个flex-shrink值ｘ各自本身宽度之和）
例如上述各自的felx-shrink值为1,2,3，计算规则为：
140=1*10+2*20+3*30;
x1:10-10*(1*10/140)
x2:20-10*(2*20/140)
x3:30-10*(3*30/140)
- 当子元素felx-grow之和小于0时，子元素的宽度为：
本身宽度-（溢出宽度 ｘ flex-shrink值之和）ｘ（flex-shrink值ｘ本身宽度/各个flex-shrink值ｘ各自本身宽度之和）
例如上述各自的felx-shrink值为0.1,0.2,0.3，计算规则为：
14=0.1*10+0.2*20+0.3*3;
６=10*(0.1＋0.2＋0.3)
x1:10-６*(0.1*10/14)
x2:20-６*(0.2*20/14)
x3:30-６*(0.3*30/14)
类似 flex-grow，flex-shrink 也会受到 min-width 的影响
参考文档：
详解 flex-grow 与 flex-shrink
flex-basis属性
flex-basis指定了flex-item在主轴方向上的的初始大小
如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器。
如果同时设置flex-basis和width，那么width属性会被覆盖，也就是说flex-basis的优先级比width高
如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。
flex-basis和width都为auto值，那最后的空间就是根据内容多少来定的，内容多占据的水平空间就多
参考文档：深入理解css3中的flex-grow、flex-shrink、flex-basis
align-self、align-content、align-items的区别
align-item 属性需要施加在 flex 容器上，它规定的是 flex 容器中所有 item 在交叉轴中的对齐方式；设置flex 容器中所有的 item 都按一个方向对齐时用它（图片来自阮大博客）
align-self 属性则施加在 flex 容器中的 item 上，允许单个项目有与其他项目不一样的对齐方式，它覆盖了外部容器规定的 align-items 属性，同样也只规定在交叉轴上的对齐方式，如果想设置某一个item有不一样的对齐方式的时候，可以用它（图片来自阮大博客）
对比 align-items 和 align-self 直接移动 item 自身在交叉轴上的基线，align-content 移动的是容器自身的 flex line，并仅对多行的项目起作用（图片来自阮大博客）
参考文档：
flex布局教程
笔记：flex-wrap 和 align-self，align-items，align-content 之间的关系