flex布局中的width

举个例子：左边元素定宽，右边元素占满余下部分

关于flex容器内元素的flex属性的解释

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

1.flex-grow

flex-grow定义对额外空间的占有量，默认0，即表示有多余的空间也不要。

1.png

当给最后一个box加上flex-box的类，即设置flex:1，则最后一个box会占据剩下空间，如果给每个box设置不同的flex值，则会按比例分配剩下的空间。

2.png

flex-shrink

和flex-grow相反，即当各个元素所占空间之和大于容器时，压缩每个元素的比例，默认是1.如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

1.当设置box的flex-shrink为0时，即不论超出多少，都不压缩子元素的空间，如下图

3.png

2.当每个box设置flex-shrink为1时，即三个box压缩同样的比例，如下图

4.png

3.当给每个box设置flex-shrink依次为1,2,3时，子元素会按照比例来压缩，如图

5.png

flex-basis

表示在分配额外空间之前，成员占据的空间，默认值为auto，意思就是你本来占多少就是多少。但也可以自己设置长度(px)。这个值的效果就是确定在释放和分配空间的时候，你的初值是多少,即flex items 在被放进一个flex容器之前的大小

常用值

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

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