如何使用nth-child同时控制flex/grid等布局下所有子元素的位置

无需修改现有HTML结构，仅调整CSS规则即可满足要求，所有子元素数量场景的展示效果均不受影响。

调整后完整CSS代码 #

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 200px;
  height: 200px;
}

/* 匹配仅包含4个子元素的父容器，切换为横向排列 */
.parent:has(.child:nth-last-child(4):first-child) {
  flex-direction: row;
}

.child,
.child:not(:nth-child(1)) {
  width: 100px;
  height: 100px;
}

.child:last-child:nth-child(1) {
  width: 200px;
  height: 200px;
}

.child:nth-child(1),
.child:last-child:nth-child(2) {
  width: 100px;
  height: 200px;
}

.child:nth-last-child(4) {
  width: 100px;
  height: 100px;
}

效果验证 #

• 1个子元素：完全占满200*200的父容器
• 2个子元素：左右并排，每个尺寸为100*200
• 3个子元素：保持原有纵向换行效果，第一列放置前两个100*100元素，第二列放置第三个元素
• 4个子元素：自动切换为横向换行布局，按行排列为第一行1 2、第二行3 4，符合要求

兼容说明 #

如果需要兼容不支持CSS :has() 伪类的老旧浏览器，可以通过简单的JS逻辑实现同样效果：遍历所有.parent容器，统计子元素数量，给正好包含4个.child的容器添加自定义类名如is-four，再将上述CSS中.parent:has(...)选择器替换为.parent.is-four即可。 #

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