如何实现Flex容器内3行元素分别居顶、居中、居底对齐？

你只需要修改.garden的CSS样式，将它设置为垂直方向的flex容器，就能实现三行在垂直方向的分布：

.garden {
  width: 500px;
  height: 500px;
  background: #CCC;
  /* 添加以下flex属性 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flower {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
}
.row {
  display: flex;
}
.row:first-child {
  justify-content: space-between;
}
.row:nth-child(2){
  justify-content: center;
}
.row:last-child {
  justify-content: space-around;
}

说明： #

• display: flex 将.garden转为flex容器，让内部的.row元素遵循flex布局规则
• flex-direction: column 设定flex容器的主轴为垂直方向，三个.row会从上到下排列
• justify-content: space-between 会让第一个.row贴紧容器顶部，最后一个.row贴紧容器底部，中间的.row自动处于垂直居中位置，完全匹配你需要的布局效果
• 你之前写的.row相关水平对齐样式无需修改，会继续控制每行内部花朵的水平分布

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