html – 如何创建一个在包装之前收缩的flex项目?

发布时间:2020-01-13 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了html – 如何创建一个在包装之前收缩的flex项目?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

从这个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;
}

revised fiddle

大佬总结

以上是大佬教程为你收集整理的html – 如何创建一个在包装之前收缩的flex项目?全部内容,希望文章能够帮你解决html – 如何创建一个在包装之前收缩的flex项目?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。