持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
背景
写网页的第一步，一般都离不开要写一个的navigation bar(导航栏)。当然如果不想自己动手写，也可以引入其他框架的导航栏。但是基于其他框架的导航栏，样式单一局限性高，自定义比较复杂。所以基于上述原因还是选择自己造轮子。
初始导航页
本文是基于Vite+Vue3+ant-design-vue,为了方便编写，减少与本文无关的开发时间。
我们先来看一个简单的导航栏，如下图：
导航栏
这个导航很容易可以看出有三块内容，分别的是左边的Login，中间的搜索框和右边的其他页面导航(如登录页和注册页等)。
浮动
最开始的想法，那就是使用浮动。CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。所以需要注意的是使用浮动之后是需要同时清理浮动，以避免页面布局错位。
// 使用 float：left 让页面从左向右浮动
// 或者 float：right 让页面从右向左浮动
.float-left {
float: left;
}
// 元素浮动之后，父元素会不能自适应高度，一般可以用一下方法
// 1 使用clear:left 清除浮动
.clear::after {
clear: left;
}
// 2 使用overflow:hidden解决父元素自适应高度
.box{
overflow:hidden;
}
当然一般是不推荐使用浮动的，这个时候就是可以使用flexbox。
改进导航页
默认的元素是从上而下排列，而使用display:flex之后的元素可以按列排列。
当我们开启flexbox后，我们可以点开chrome的devtools就会在元素的左边看到flex标志如下图：
devtools查看flex标志
同时我们也可以通过devtools查看flex的属性及其实现样式：
devtools查看flex标志
flex基本的属性用法如下，读者也可以在devtools中简单尝试，选择自己满意的样式。
flex-direction:元素的排列方式
row从左往右排列，默认方式row-reverse从右往左排列column从上往下排列column-reverserow从下往上排列
flex-wrap: 子元素超出父容器时是否换行
wrap一行排满了会往下换行nowrap不换行wrap-reverse一行排满了，会往上换行
justify-content:主轴（横轴）方向上的对齐方式
center从中间开排列flex-start从前方开始排flex-end从后方开始排space-between两边靠边，本次导航栏选择这个space-around两边靠中space-evenly元素等分
align-items: 侧轴（纵轴）方向上的对齐方式
center:一般可以作为垂直居中flex-start从顶开始排flex-end从底开始排baseline按照基线排stretch默认值，项目将被拉伸以适合容器
