flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置，容器的设置是管理成员的排列方式，也就是管理排列的方向和对齐的位置。成员的设置则是关于成员的大小和显示的位置（order）。

弹性布局，弹性布局，天然要提现他的弹性，所谓弹性也就是对空间的分配。成员设置中的flex属性，就是对于额外空间的管理。

flex能够设置三个值，第一个值必选，后两个可选。

 

flex的第一个值

能够用flex-grow单独设置，表明含义是对额外空间的占据量，所谓额外空间就是这一行多余的空间，有多余的空间这一属性才有用。默认值是0，意思就是即便有多余空间，它也不要。

举个列子

这就是默认的效果，若是给其中的一个设置任意一个正值，那它会把全部额外空间占掉；若是给多个成员设置正值，那么他们会根据正值的大小分配，好比值一个为1，一个为2，那么额外空间就会分红三份，给1的一份，给2的两份。

首先将二号设为1，如图

若是将二号设为1，三号设为2，如图

有人会把flex-grow的值理解为总长度，这是个误解，它实质是对额外空间的分配。

 

flex的第二个值

能够用flex-shrink单独设置，这个属性只有在没有额外空间时起做用，意思是没有额外空间时，成员贡献出空间的大小。默认值为1，若是为0意思是不贡献空间，也就是说即便空间不足，成员大小也不发生改变。

首先默认状况，改变容器的大小

而后，若是设置为0。

若是给二号设置为2， 已知默认值为1

能够看出二号释放出的空间是一和三的两倍，因此这里的值并非缩小的比例，而是释放空间的份额。默认都为1，那也就是说你们释放同等的空间去填补容器的缩小量。

 

flex的第三个值

能够用flex-basis来设置，这个值呢，表示在分配额外空间以前，成员占据的空间，默认值为auto，意思就是你原本占多少就是多少。但也能够本身设置长度(px)。这个值的效果就是肯定在释放和分配空间的时候，你的初值是多少。

好比三个成员本来长度同样的，我给二号设置flex-basis，如图

 

总结

flex属性其实就是flex-grow，flex-shrink，flex-basis三者的缩写形式。要么只写第一个，要么三个全写，防止本身搞错（确实有flex：0 auto 这种写法，但最好仍是避免吧）

通常还有几个经常使用值

flex：auto；  等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。

flex:none;  等同于flex：0 0 auto；  意思是不占额外空间，不可缩放。

从字面上解释大概就是可弹性与不可弹性。