仅使用CSS Flexbox实现顶部2个元素、底部1个元素的布局效果

基于Flexbox的实现代码如下 #

你可以直接替换原有的style标签内容即可：

<style>
.parent {
  /* 启用flex布局 */
  display: flex;
  /* 允许子元素超出后换行 */
  flex-wrap: wrap;
  /* 多行内容沿交叉轴两端对齐，实现第一行靠顶部、最后一行靠底部 */
  align-content: space-between;
  width: 100%;
  height: 90vh;
}
/* 调整顶部左侧元素的排序优先级，让它排在顶部右侧元素前面 */
.parent :nth-child(2) {
  order: -1;
}
/* 底部右侧元素设置左外边距自动，将其推到行最右侧 */
.parent :last-child {
  margin-left: auto;
}
</style>

实现逻辑说明 #

• 父元素开启flex布局并允许换行后，原本的3个子元素会自动拆为两行：前两个元素占第一行，最后一个元素单独占第二行
• 通过order: -1调整第二个子元素（顶部左侧内容）的排序，让它显示在第一行最左侧，原本排在第一个的顶部右侧内容自然显示在第一行最右侧
• align-content: space-between会让两行分别靠父容器的顶部和底部对齐
• 最后一个元素添加margin-left: auto后，会自动占据行内左侧所有剩余空间，实现元素右对齐效果

内容的提问来源于stack exchange，提问作者Jones Napoleon Autumn