场景
有的时候我们需要将菜单水平、并且左右进行摆放
效果图
代码实现
<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 可以使该元素占据剩余的空间。