先来盘一盘我自己遇到的问题场景,大概如图所示:
前提条件: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布局有的属性用的比较少,太容易遗忘了。