flexbox可以检测弹性商品何时包装吗? [英] Can flexbox detect when a flex item wraps?
问题描述
我希望摆脱媒体查询，仅使用flexbox解决我的问题，但是我不确定是否可行.随着窗口变小，我希望列缩小直到它们达到最小宽度.一旦他们击中，中间一栏将跳下来进行换行.
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.
我认为我的问题可以归结为这一点-flexbox是否可以检测到何时包装?如果是这样，我是否可以提示它使用严格的CSS更改包装物品的顺序?
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?
这是我试图使用媒体查询完成的 codepen .
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>
推荐答案
flexbox可以检测弹性商品何时包装吗?
否.
在CSS中，一旦浏览器在初始级联上呈现页面，当元素包装时，它就不会重排文档.结果，父元素不知道它们的子级何时包装.
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.
这就是为什么您需要媒体查询或JavaScript.
That's why you need media queries or JavaScript.
以下是更多详细信息:
- Make container shrink-to-fit child elements as they wrap
- How to center a flex container but left-align flex items
这篇关于flexbox可以检测弹性商品何时包装吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
