element-ui 的NavMenu菜单实现水平左右布局

场景

有的时候我们需要将菜单水平、并且左右进行摆放

效果图

代码实现

<template>
  <div class="app">
    <el-divider>官网示例</el-divider>
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6">中英文切换</el-menu-item>
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
    <el-divider class="color-red"
      >需求：中英文切换和我的信息再最右侧显示</el-divider
    >
    <el-divider content-position="left">方式1：浮动</el-divider>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-1"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="float: right">中英文切换</el-menu-item>
      <el-menu-item index="5" style="float: right">我的信息</el-menu-item>
    </el-menu>
    <el-divider content-position="left">方式2：flex布局+flex:1</el-divider>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-2"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="flex: 1">中英文切换</el-menu-item>
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
    <el-divider content-position="left"
      >方式3：flex布局+margin-left:auto <strong>推荐</strong></el-divider
    >
    <el-menu
      :default-active="activeIndex"
      class="el-menu-3"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="margin-left: auto"
        >中英文切换</el-menu-item
      >
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
    <el-divider content-position="left"
      >方式4：flex布局+justify-self <del>[生效]</del></el-divider
    >
    <el-menu
      :default-active="activeIndex"
      class="el-menu-4"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>

      <el-menu-item index="6" style="justify-self: end"
        >中英文切换</el-menu-item
      >
      <el-menu-item index="5">我的信息</el-menu-item>
    </el-menu>
  </div>
</template>
<script setup>
import { ref } from "vue";

const activeIndex = ref();
</script>
<style scoped>
.el-menu-2,
.el-menu-3,
.el-menu-4 {
  display: flex;
}
.color-red .el-divider__text {
  color: #f00;
}
strong {
  font-size: 30px;
}
</style>

总结

在 Flexbox 布局中，我们经常需要对子元素进行对齐操作。使用 justify-content 和 align-items 可以轻松地对所有子元素进行对齐，但是当我们需要对某个子元素进行单独的对齐时，该怎么做呢？
有时，我们可能会在 Flexbox 容器中使用 justify-self 属性来实现子元素的水平对齐。但是，需要注意的是，justify-self 在 Flexbox 布局中是无效的。这意味着，如果您想让一个子元素在 Flexbox 布局中水平对齐，您需要使用其他技术。
一种常见的技术是将子元素的 margin-left 设置为 auto。当您将一个子元素的 margin-left 设置为 auto 时，该元素将被推到容器的最右边，同时保持其他元素的左对齐。这是因为在 Flexbox 布局中，剩余的可用空间会平均地分配给所有子元素，而将一个子元素的 margin-left 设置为 auto 可以使该元素占据剩余的空间。

参考文章

• https://juejin.cn/post/7205841266905563197#comment