如何使用Flexbox调整2x2网格div顺序，兼容1-4个方块的动态适配需求

你之前给.container2设置的flex-direction: column-reverse不生效，核心原因是该元素没有被声明为flex容器，只有display属性为flex/inline-flex的元素，flex布局相关属性才会生效。不需要修改现有HTML结构，只需要补充少量CSS即可实现需求，同时兼容1-4个方块的展示场景。

调整后的CSS代码 #

.container {
  height: 600px;
  width: 800px;
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
/* 新增子容器的flex声明 */
.container1, .container2 {
  display: flex;
  flex-direction: column;
}
.container2 {
  flex-direction: column-reverse;
}
.square {
  font-size: 84px;
  text-align: center;
  margin: 20px;
  background-color: green;
  width: 300px;
  height: 200px;
}

兼容性说明 #

• 方块数量为1：单个方块正常展示，无布局错乱
• 方块数量为2：同子容器内纵向排列，不同子容器横向排列，顺序符合预期
• 方块数量为3：空缺位置自动留空，布局逻辑保持一致
• 方块数量为4：自动形成2x2网格，2和3的位置完成互换，满足排序要求

如果不想保留两层子容器结构，也可以直接去掉.container1和.container2，给外层容器设置flex-flow: row-reverse wrap，再通过order属性给每个方块动态调整顺序，同样可以适配不同数量的方块场景。

内容的提问来源于stack exchange，提问作者Pimv_h