【CSS】flex布局中子元素设置宽度失效

先来盘一盘我自己遇到的问题场景，大概如图所示：

 

前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。

简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。

问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。

而问题的原因主要在于flex的flex-grow和flex-shrink属性。

先让我们来了解一下这两个属性。

1、flex-grow

默认值是0，表示放大比例，如果存在剩余空间，也不放大。

2、flex-shrink

默认值是1，表示缩小比例，如果空间不足，该项目就会缩小。

在上述场景中，并没有设置这两个属性，那么取的就是默认值。

如果div1内容超长了，想必空间是不够的，这个时候div2的宽度就被缩小了。

解决方案其实也很简单，像我的这个场景，只需要给div2设置 flex-shrink: 0 即可。表示空间不足的情况下，div2也不缩小。

flex-shrink: 0;

更多关于flex的属性，可以参考 阮一峰老师的Flex布局教程

正好遇到了就复盘一下，主要是flex布局有的属性用的比较少，太容易遗忘了。