#flex布局(2)-子元素

Property #1: Flex-basic

改变main axis的长度，默认值是auto

Property #2: Flex Grow

flex-grow(膨胀系数),默认值是0,也就是元素不会主动去占据容器的空间，集中在一侧。

这个值是个相对值，当所有子元素都进行设定为1时后，他们占据的空间大小相同，如果将其中一个改为3，这个被改动的元素将占据更多的空间。简单的说，具体某个元素的flex-grow是分子，所有子元素的flex-grow之和是分母，分子越大，占据的空间也就越多。

值得注意的是，用于让子元素抢占的空间，并不是整个父容器，当前父容器比刚好紧凑放置子元素的容器多出来的部分。

Property #3: Flex Shrink

与flex-grow相反，flex-shrink(收缩系数)决定元素的收缩程度。只有当容器太小，需要子元素收缩适应时才使用这个属性。

默认情况下，所有子元素的flex-shrink的默认值是1，意味着他们当容器太小时，他们将受到容器的约束进行收缩。
如果要让一个子元素不自动收缩，那么就把它的flex-grow设置为0。

同样的，flex-grow也是个相对值，这个值越大收缩的程度越大。每个元素按比例收缩，而收缩的总值等于刚好紧凑放置子元素的容器与当前父容器的差值。

Property #4: Flex

flex是grow, shrink, basis的集合，它的默认值是0 1 auto，分别对应grow，shrink，basis

参考文章：https://medium.freecodecamp.com/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053