flexbox 可以检测 flex 项目何时换行吗? [英] Can flexbox detect when a flex item wraps?

问题描述

我希望摆脱媒体查询，只使用 flexbox 来解决我的问题，但我不确定这是否可行.随着窗口变小，我希望列缩小，直到达到最小宽度.一旦他们击中那个，中间的柱子就会跳下来包裹.

我认为我的问题归结为这个 - flexbox 可以检测到它何时包装?如果是这样，我可以提示它使用严格的 CSS 更改包装项目的顺序吗?

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

.wrapper {显示:弹性；对齐内容:居中；边距:5px；flex-wrap: 包裹;}.红色的 {背景颜色:红色；高度:240px；边距:5px；宽度:500px；订单:0；}.黄色的 {背景颜色:黄色；边距:5px；高度:240px；最小宽度:240px；最大宽度:400px；弹性:1；订单:1；}.蓝色 {背景颜色:蓝色；高度:240px；边距:5px；最小宽度:350px；最大宽度:400px；弹性:1；订单:2；}@media(最大宽度:1130px){.黄色的 {订单:4；}}

<div class="red"></div><div class="yellow"></div><div class="blue"></div>

解决方案

flexbox 可以检测 flex item 何时换行吗?

没有

在 CSS 中，一旦浏览器在初始级联上呈现页面，它就不会在元素换行时重排文档.因此，父元素不知道其子元素何时换行.

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

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

以下是更多详细信息:

• 在包装子元素时使容器收缩以适应子元素
• 如何居中弹性容器但左对齐弹性项目

I am hoping to get rid of media queries and just use flexbox to solve my problem, but I'm not sure if this is possible. As the window gets smaller, I want the columns to shrink until they hit their minimum width. Once they hit that, the middle column will jump down for the wrap.

I think my question boils down to this- can flexbox detect when it wraps? If so, can I prompt it to change the order of the items on wrap with strictly CSS?

Here is a codepen of what I"m trying to accomplish using media queries.

.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?

No.

In CSS, once the browser renders the page on the initial cascade, it doesn't reflow the document when an element wraps. As a result, parent elements don't know when their children wrap.

That's why containers don't shrink-to-fit their content after wrapping.

That's why you need media queries or JavaScript.

Here are some more details:

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

这篇关于flexbox 可以检测 flex 项目何时换行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！