Css 如何将较短的flex内容拉到上面的行中

对于狭义内容，我希望布局：

[ CONTENT ONE ] 
[ CONTENT ONE ] 
[ CONTENT TWO ]
[ CONTENT TWO ]
[ CONTENT TWO ]
[ CONTENT TWO ]
[ CONTENT THREE]
[ CONTENT THREE]
[ CONTENT THREE]
[ CONTENT THREE]
[ CONTENT THREE]

但如果容器变宽，我希望：

[ CONTENT ONE ]   [ CONTENT TWO]
[ CONTENT ONE ]   [ CONTENT TWO]
[ CONTENT THREE ] [ CONTENT TWO]
[ CONTENT THREE ] [ CONTENT TWO]
[ CONTENT THREE ]

---

使用flex可以实现这种布局吗？在广角视图中，1的高度与2的高度相同，但我希望能够将3向上拉，使其位于2的底部上方

是的，您可以使用flexbox和

order

属性进行布局。还有别的办法吗？也许。寻找“砌体布局”解决方案；然而，大多数可能会涉及Javascript来检测维度，而不仅仅是纯css

根据您的具体需要，如果您不能使用媒体查询，那么您必须使用JS来监视父元素的宽度并进行相应的调整。还有其他关于这个话题的帖子

#容器{
最大宽度：600px；
显示器：flex；
柔性流：柱包裹；
宽度：100%；
/*这需要强制柱侧向（向右）缠绕，
否则，这将始终是一个直列*/
最大高度：200px；
}
.组{
填充：1em；
最大宽度：400px；
}
#第一组{
背景色：红色；
颜色：白色；
顺序：1；
}
#第2组{
背景颜色：绿色；
颜色：白色；
/*将order设置为3，这将强制此元素位于列表的末尾。
由于“column wrap”是在容器上设置的，并且它有一个最大高度，所以列表水平地进行换行，迫使该元素显示在右侧*/
顺序：3；
}
#第3组{
背景颜色：蓝色；
颜色：白色；
顺序：2；
}
/*媒体查询示例，将列表重置为常规顺序列*/
@介质（最大宽度：320px）{
#容器{
/*设置为普通柱视图*/
柔性流动：柱；
}
#第2组{
顺序：2；
/*您将看到group2和group3现在都有“order:2”，在本例中，HTML结构优先*/
}
}

1A
1B
2A
2B
2C
二维
3A
3B
3C
三维
3E

恐怕您需要一个媒体查询，在这里您可以更改

订单

属性。对我来说，这更像是3个

浮动

s，而不是一个flexbox@MrLister很遗憾，我无法使用媒体查询，因为列数是基于可变宽度容器的大小，而不是窗口的大小。@，使用浮动，您会遇到一个问题，即内容三并不直接低于内容一，因为内容二更高。