按作用目标划分
| 作用在父容器上 | 作用在子项上 |
|---|---|
| flex-direction | flex-grow |
| flex-wrap | flex-shrink |
| flex-flow | flex-basis |
| justify-content | flex |
| align-items | align-self |
| align-content | order |
注意： 父、子只是一个相对的概念，可以根据实际应用情况进行拓展
需要深入理解的几个属性
flex-grow 和 flex-shrink 原理
flex-grow 父级宽度大于子项宽度总和的情况生效，表示子项如何扩展
flex-shrink 父级宽度小于子项宽度总和的情况生效，表示子项如何收缩
二者接收的值都是数字，flex-grow 默认值为 0（表示：子项不扩展，父级多余的宽度会空着），flex-shrink 默认值为 1（表示：子项宽度总和超出父级的宽度的部分，在每一个子项都要收回来，并且每个子项收缩的量相等）
以下示例父容器为 flex，宽度350px，子项有五项：
一、flex-grow
设置各子项的宽度为 50px ，这时子项宽度总和小于flex容器宽度，父容器剩余宽度 100px
- 如果不设置
flex-grow，默认每一项都没有扩展，剩余的空间（宽度 100px）就白在那里了，如下图
五项 flex-grow 均为 0 的情形
-
接1，只有其中一项设置了扩展数（数字任意），则这一项独占剩余空间，如下图
第一项设置了flex-grow，其余项仍为0
3.其中两项都设置扩展数，如下图
可以看出前两项等分了剩余的100px，每一项宽度都增加了50px；
4.给每一项都设置扩展数，如下图
可以看出每一项都参与了瓜分剩余的100px，在原本自身宽度的基础上进行了扩展，归结下来：
第一项（flex-grow: 1）扩展了宽度：
100/(1+2+3+4+5)*1px...
第五项（flex-grow: 5）扩展了宽度：
100/(1+2+3+4+5)*5px即
flex-grow 就是一个份额，父级剩余宽度被所有子项的 flex-grow 加起来的总份额进行切分，子项按自己所设置的份额进行扩展。所以当 flex 容器只有一个子项设置了 flex-grow 数值的时候，无论这个数值设置为多少，当父容器宽度有剩余时，都是这个子项独占。父容器设置为换行的情况同理。
二、flex-shrink
设置各子项的宽度为 80px ，这时子项宽度总和大于flex容器宽度，超出了 50px
1.如果不设置flex-shrink，默认每一项都会收缩，并且每一项收缩的宽度是一样的，如下图
2.接1，只给第一项设置收缩数为0，则只有这一项不会收缩，如下图
同理，给前三项设置flex-shrink为0，则前三项都不收缩，最后两项分别收缩25px
2.前三项前三项设置flex-shrink为0，第四项不设置，第五项flex-shrink为4，如下图
伸缩量计算逻辑基本上和扩展量的计算相同，但是不同之处在于，不设置 flex-shrink 的子项它的收缩占比默认是1，其余各项按其设置的数字占比进行计算，flex-shrink 为0的项不会收缩。通常在父容器设置为 nowrap 的情况生效。
flex-basis
当父容器的 flex-direction 设置为 row 时，子项的 flex-basis 控制 宽度，此时设置 width 不生效；
当父容器的 flex-direction 设置为 column 时，子项的 flex-basis 控制 高度，此时设置 height 不生效；
也就是说，flex-basis 仅作用在主轴，当主轴方向为行时，虽然此时设置 width 不生效，但是设置 height 仍然是生效的，二者结合起来就可以定义子项的尺寸。
但是，当某个子项相对于父容器设置了绝对定位时，flex-basis 不生效，只有 width 和 height 生效。
参考：https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width
flex
有三种取值的可能：
1.一个值的情况，表示 flex-grow （数字）或者 flex-basis （百分比或带单位的数字）
2.两个值的情况，表示 flex-grow flex-shrink（两个数字）或者 flex-grow flex-basis（一个数字和一个百分比或带单位的数字）
3.三个值的情况，表示flex-grow flex-shrink flex-basis（两个数字和一个百分比或带单位的数字）
justify-content 与 align-content
justify-content 指的是水平方向上子元素如何分布，戳这里
justify-content 经常用到的几个属性值：
center
space-around
space-between
space-evenly
flex-start
align-content 指的是竖直方向上子元素如何分布，戳这里
