需求

使用使用flex做横向布局时，常常有左边固定宽度，右边自适应占满的需求。

解决方法

这个时候左边设置固定宽度，右面元素一般会使用flex:1 属性自动填满空间。

其他问题

如果宽度不够时会出现空间压缩的问题，导致左边元素会发生挤压，无法达到css中给定的宽度。
这个问题是由flex伸缩项属性的默认值引起的，flex-shrink属性的默认值为1，即默认当空间不足时会缩小，需要将其值改为0，保持原始大小。

其他说明

• flex:1 实际上是 flex-grow:1; flex-shrink:1; flex-basis:0%; 的简写，

• flex 伸缩项属性一共有三个，即flex-basis，flex-grow，flex-shrink

flex-basis

优先级最高的是flex-basis，这个属性决定CSS如何给可伸缩项在容器中分配初始大小，其含有两个值，

• auto（默认）的意思是首先看当前项有没有明确设置宽度，如果有则使用该宽度；如果没有，则以包含的内容决定宽度。

• content是不管当前项是否明确设置了宽度，一律以内容决定宽度。

flex-grow

该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，其余值可取正整数，意思是放大占剩余空间份数。

当有剩余空间时，当前项可分得的剩余空间 = ( 当前项flex-grow值/所有项flex-grow值之和 ) * 剩余总宽度。

flex-shrink

该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。其值为0时则空间不足也不会缩小，其余正值为缩小份数（比例）。

当前项收缩的宽度 = ( 当前项flex-shrink  当前项flex-basis/ 所有项flex-shrink 与各自flex-basis乘积之和 ) 需收缩的总宽度