简单易懂的 flex 布局技巧：前面盒子左对齐，后面盒子右对齐

水星记_

已于 2025-03-08 11:27:10 修改

阅读量1.5w

点赞数 13

分类专栏： css 文章标签：前端 html

于 2021-01-23 16:47:02 首次发布

本文链接：https://blog.youkuaiyun.com/Shids_/article/details/113057653

版权

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用CSS的Flex布局来实现页面元素的灵活布局，特别是让盒子靠左或靠右显示。通过设置`display:flex`和`margin-left:auto`，可以轻松创建一排div中前面的盒子靠左，最后一个盒子靠右的效果。此外，还展示了如何让两个元素分别居左和居中显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

页面布局的灵活性和效果直接影响着用户的使用体验。而在实现页面布局时，我们通常会使用 css 的布局方式来进行设计。其中，flex 布局作为一种比较新的布局方式，其灵活性和效果备受开发者的青睐。在这里，我将为大家介绍如何使用 flex 布局来实现一排 div 的布局，让前面的盒子靠左显示，最后的盒子靠右显示。

实现思路

首先需要给父盒子设置 display:flex；让其变成一个弹性布局，这里是模拟一行有三个 div 盒子，给最后一个盒子设置 margin-left: auto ，如下：

<template>
  <div>
    <!-- 父盒子 -->
    <div class="father_box">
      <!-- 第一个盒子 -->
      <div>我是最左边的内容</div>
      <!-- 第二个盒子 -->
      <div>我是第二个盒子</div>
      <!-- 第三个盒子 -->
      <div class="right_box">我是最右边的盒子</div>
    </div>
  </div>
</template>
<style scoped>
.father_box {
  background: cornflowerblue;
  color: #fff;
  display: flex;
}
.right_box {
  margin-left: auto;
}
</style>

效果如下：
在这里插入图片描述

同理，如果想让第一个盒子向左显示，其余盒子都向右显示，只需要给左边的第一个盒子设置 margin-right:auto 即可。

实现两个元素一个居左一个居中

<template>
  <div>
    <div class="maxBox">
      <div class="leftBox">左边</div>
      <div class="centerBox">中间</div>
      <!-- 重点在第三个是一个空盒子且名字要跟第一个盒子的名字一致 -->
      <div class="leftBox"></div>
    </div>
  </div>
</template>
<style scoped>
/* 最大的盒子 */
.maxBox {
  display: flex;
  background-color: cornflowerblue;
  color: white;
}
/* 第一个盒子 */
.leftBox {
  flex: 1;
}
/* 第二个盒子 */
.centerBox {
  text-align: center;
}
</style>