flex布局下如何不修改HTML且不改动其他元素位置将灰色元素置于底部

解决方案 #

无需修改HTML结构，也不会改动红、绿、蓝、紫四个非灰色元素的原有布局位置，仅需新增少量CSS规则即可实现灰色块固定在容器底部的需求。

修改说明

保留你原有所有CSS代码，新增如下两条规则即可：

.container {
  align-content: start;
}
.grey {
  margin-top: auto;
  /* 可根据需求调整灰色块高度，此处为示例值 */
  height: 50px;
}

完整可运行CSS代码

.red {
  background-color: #900;
  height: 100px;
}

.green {
  background-color: #090;
  height: 100px;
}

.blue {
  background-color: #00F;
  height: 100px;
}

.purple {
  background-color: #63C;
  height: 100px;
}

.grey {
  background-color: #666;
  height: 50px;
  margin-top: auto;
}

.container {
  background-color: #FFF;
  width: 50%;
  height: 70%;
  min-height: 400px;
  margin: auto;
  border: 2px solid black;
}

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-content: start;
}

.item {
  width: 45%;
  margin-bottom: 5%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 0;
}

.item:last-child {
  width: 100%;
}

实现原理

flex布局中，子元素的margin-top: auto会自动占用元素上方所有可用的剩余空间，直接将元素推至容器交叉轴的底部位置，不会影响其他同级元素的原有排列逻辑。

最终实现效果：

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