深入理解 flex 相关属性

按作用目标划分

作用在父容器上	作用在子项上
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

1. 如果不设置flex-grow，默认每一项都没有扩展，剩余的空间（宽度 100px）就白在那里了，如下图
   
   五项 flex-grow 均为 0 的情形

2. 接1，只有其中一项设置了扩展数（数字任意），则这一项独占剩余空间，如下图

   
   
   第一项设置了flex-grow，其余项仍为0

3.其中两项都设置扩展数，如下图

前面两项都设置了flex-grow:1，其余项仍为0

可以看出前两项等分了剩余的100px，每一项宽度都增加了50px；

4.给每一项都设置扩展数，如下图

依次设置扩展数为1，2，3，4，5

可以看出每一项都参与了瓜分剩余的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，不收缩

同理，给前三项设置flex-shrink为0，则前三项都不收缩，最后两项分别收缩25px
2.前三项前三项设置flex-shrink为0，第四项不设置，第五项flex-shrink为4，如下图

不设置flex-shrink和设置了flex-shrink大于0的项按比例收缩

伸缩量计算逻辑基本上和扩展量的计算相同，但是不同之处在于，不设置 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 指的是竖直方向上子元素如何分布，戳这里

align-items 与 align-self

align-items 针对父容器下的所有子元素，戳这里
align-self 针对单个子元素，戳这里