从这个JS-Fiddle可以看出,我基本上尝试使用这个CSS来创建两个应满足这些要求的div：
>如果更宽的项目的空间可用两倍,则两者都应使用50％宽度(可行)
>如果两个物品的空间不足,它们应该包裹(有效)
>如果两个项目都有足够的空间,但是宽度小于宽度的两倍,则较窄的项目应该缩小(这不起作用,它包裹)
我不明白这种行为,因为我已经为flex项目设置了flex-shrink,所以它们应该能够缩小 – 但它们不会：如果较窄的项目宽度小于50％,它会包装.
.m {
display: flex;
flex-wrap: wrap;
}
.l_1 {
background-color: red;
flex: 1 1 50%;
}
.r_1 {
background-color: yellow;
flex: 1 1 50%;
}
(在Firefox和Chrome上测试过)
最佳答案
问题不是弹性收缩.问题是基于弹性的.你把它设置为50％.
这意味着flex-grow将为flex基础添加可用空间,并且每个项目在有机会缩小之前会快速换行.
从flex-basis切换：50％到flex-basis：0.
更具体地说,而不是flex：1 1 50％使用flex：1,分解为：
> flex-grow：1
> flex-shrink：1
> flex-basis：0
现在,flex-grow将自由空间平均分配 – 而不是按比例 – 分配给两个项目,并且它们可以在包装之前收缩.
(这是一个更深入的解释：Make flex-grow expand items based on their original size)
.m {
display: flex;
flex-wrap: wrap;
}
.l_1 {
background-color: red;
flex: 1;
}
.r_1 {
background-color: yellow;
flex: 1;
}
