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

前端之家收集整理的这篇文章主要介绍了html – flexbox检测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 class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="blue"></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

原文链接:https://www.f2er.com/html/226785.html

猜你在找的HTML相关文章