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