使用CSS flexbox实现3个子div分别位于左上角、居中、右下角布局

1. HTML结构 #

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

2. CSS代码 #

/* 父元素配置 */
.parent {
  height: 450px;
  display: flex;
  /* 主轴设为垂直方向 */
  flex-direction: column;
  /* 垂直方向子元素两端对齐，刚好三个150px子元素占满450px高度，分别在顶部、中间、底部 */
  justify-content: space-between;
}

/* 公共子元素样式 */
.child {
  height: 150px;
  /* 可根据需求调整宽度，此处仅为演示效果设置固定宽度 */
  width: 150px;
}

/* 第二个子元素水平居中 */
.child:nth-child(2) {
  align-self: center;
}

/* 第三个子元素水平右对齐 */
.child:nth-child(3) {
  align-self: flex-end;
}

实现原理说明 #

• 父元素开启flex布局后，将主轴设置为垂直方向，通过justify-content: space-between实现三个子元素在垂直方向分别停靠顶部、垂直居中、停靠底部，刚好匹配三个子元素总高等于父元素高度的条件。
• 水平方向通过子元素的align-self属性单独控制对齐方式：第一个子元素默认左对齐无需额外设置，第二个设为居中，第三个设为右对齐，完全匹配需求。

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