如何用CSS调整Flex布局：让3、4号区块对齐容器底部

要让3、4号区块对齐容器底部，只需在.container的CSS中添加align-content: space-between属性：

.container {
  width: 240px;
  height: 200px;
  border: 1px solid gray;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between; /* 新增属性 */
}

.container > div {
  width: 80px;
  height: 50px;
  border: 1px solid red;
}

原理说明 #

• align-content是专门控制多行flex元素在交叉轴（此处为垂直方向）上分布的属性。
• 设置为space-between后，flex容器会自动将多行元素分别贴紧容器顶部和底部，中间的垂直空间会被均匀分配，刚好实现顶部区块与底部区块分离的效果。

如果后续布局中元素数量或排列逻辑有变化，也可以给需要对齐底部的区块单独添加margin-top: auto，但align-content在多行flex布局场景下的解决方案更直接高效。

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