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

前言

页面布局的灵活性和效果直接影响着用户的使用体验。而在实现页面布局时，我们通常会使用 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>

---

效果如下：