html – flexbox检测Flex包装时是否可以检测？

概述我希望摆脱媒体查询,只是使用flexbox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间的列将跳下来进行包裹. 我认为我的问题可以归结为这个问题 – 当它包裹时,它可以检测到吗？如果是这样,我可以提示它改变严格CSS的包装项目的顺序吗？ 这是我尝试使用媒体查询完成的codepen. .wrapper { display: flex; 我希望摆脱媒体查询,只是使用flexBox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间的列将跳下来进行包裹.

我认为我的问题可以归结为这个问题 – 当它包裹时,它可以检测到吗？如果是这样,我可以提示它改变严格CSS的包装项目的顺序吗？

这是我尝试使用媒体查询完成的codepen.

.wrapper {  display: flex;  justify-content: center;  margin: 5px;  flex-wrap: wrap;}.red {  background-color: red;  height: 240px;  margin: 5px;  wIDth: 500px;  order: 0;}.yellow {  background-color: yellow;  margin: 5px;  height: 240px;  min-wIDth: 240px;  max-wIDth: 400px;  flex: 1;  order: 1;}.blue {  background-color: blue;  height: 240px;  margin: 5px;  min-wIDth: 350px;  max-wIDth: 400px;  flex: 1;  order: 2;}@media (max-wIDth:1130px) {  .yellow {    order: 4;  }}

<div >  <div ></div>  <div ></div>  <div ></div></div>

解决方法

Can flexBox detect when a flex item wraps?

没有.

在CSS中,一旦浏览器在初始级联上呈现页面,它就不会在元素换行时重排文档.结果,父元素不知道他们的孩子什么时候换行.

这就是为什么容器在包装后不会收缩以适应其内容的原因.

这就是您需要媒体查询或JavaScript的原因.

以下是一些更多细节：

> Make container shrink-to-fit child elements as they wrap
> How to center a flex container but left-align flex items

总结

以上是内存溢出为你收集整理的html – flexbox检测Flex包装时是否可以检测？全部内容，希望文章能够帮你解决html – flexbox检测Flex包装时是否可以检测？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。