编写网页的第一步通常与编写导航栏（导航栏）不可分割。在其他框架上，具有单一样式和复杂自定义的高限度。因此，基于上述原因，选择制作自己的车轮。
本文基于Vite+Vue3+Ant-Design-Vue。为了促进写作并减少与本文无关的发展时间。
让我们首先看一个简单的导航栏，如下所示：
导航栏
该导航很容易看到有三个内容，它们是左侧的登录，中间的搜索框和右侧的其他页面（例如登录页面和注册页面等）。
最初的想法是使用浮动。CSS的浮子将将元素移至左或右，并且周围的元素将被重新安排。因此，应注意，使用浮动后，有必要清理和清理和清理和同时浮动以防止页面布局错位。
当然，通常不建议使用浮动。目前，可以使用FlexBox。
默认元素是从上到下排列的，使用显示后的元素可以在列中排列。
当我们打开Flexbox时，我们可以打开Chrome的DevTools，以查看元素左侧的Flex徽标，如下所示：
DevTools查看Flex徽标
同时，我们还可以通过DevTools查看Flex的属性和实现样式：
DevTools查看Flex徽标
FLEX的基本属性用法如下。读者还可以尝试在Devtools中尝试自己的满意风格。
：元素的布置
：子元素是否超出了父容器以更改行
：沿主轴方向（水平轴）的对齐方法
：侧轴方向（垂直轴）的对齐方法
原始：https：//juejin.cn/post/7101651630172405791