如何在flex column布局且justify-content:center的容器中将指定元素置底？

我有如下HTML代码：

<div id="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div id="end">E</div>
</div>

以及如下CSS代码：

#container {
  height: 500px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#end {
  justify-self: end;
  color: red;
}

如何将内容为“E”的元素置于容器底部？我不想使用相对定位和绝对定位，因为需要保证响应式效果。我希望除了包含字母E的div外，其他元素都保持居中。

在flex列布局中，justify-self属性不生效（该属性针对网格布局设计）。要实现需求，只需给#end元素添加margin-top: auto：

修改后的CSS代码：

#container {
  height: 500px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#end {
  margin-top: auto;
  color: red;
}

原理 #

• 容器设置justify-content: center后，A-D元素会在垂直方向居中排列。
• 给E元素设置margin-top: auto，flex布局会自动将容器内E元素上方的剩余空间分配给这个margin，从而把E推至容器底部，同时不破坏其他元素的居中状态，完全适配响应式场景。

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