如何在Flex纵向布局中将第三列div移动至底部作为独立行展示

实现方案 #

方案1：基于Flex布局修改（无需改动HTML结构） #

保留原有HTML代码不变，仅新增少量CSS即可实现需求：

/* 原有CSS代码保留，新增以下样式 */
.d-flex {
  flex-wrap: wrap;
}
.flex-even:nth-child(3) {
  flex-basis: 100%;
}

原理：给flex父容器开启换行规则flex-wrap: wrap，允许子元素超出容器宽度时自动换行，第三个子元素设置flex-basis: 100%后宽度占满整行，会自动换行单独作为一行展示。

方案2：基于Grid布局实现（代码更简洁） #

调整父容器布局规则为Grid，代码逻辑更直观：

.d-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.flex-even:nth-child(3) {
  grid-column: 1 / -1;
}
section {
  border: solid 1px red;
}

原理：Grid布局默认定义两列等宽排列，第三个元素设置grid-column: 1 / -1表示从第一列跨越到最后一列，自然占满整行。

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