使用Flexbox实现导航栏水平排列最高效，通过display: flex将容器设为弹性布局，默认子元素水平排列。设置flex-direction: row确保从左到右排列，结合justify-content、align-items和gap优化对齐与间距，使导航栏美观且响应式。
要在CSS中实现导航栏的水平排列，使用Flexbox是最简单且高效的方式。通过设置 display: flex 和控制 flex-direction 属性，可以轻松让导航项在同一行上排列，并保持良好的响应式特性。
启用Flexbox布局
将导航容器（如 <nav> 或 <ul>）设为弹性容器，是实现水平排列的第一步。
示例代码：
nav {
display: flex;
}
此时，所有子元素（如 <li> 或 <a>）会默认沿主轴水平排列，也就是从左到右一行显示。
立即学习“前端免费学习笔记（深入）”；
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
使用flex-direction控制方向
flex-direction 决定主轴的方向，从而影响子元素的排列顺序。常用值包括：
- row：从左到右水平排列（默认值）
- row-reverse：从右到左水平排列
- column：从上到下垂直排列
- column-reverse：从下到上垂直排列
对于水平导航栏，通常使用 row 或 row-reverse。
nav {
display: flex;
flex-direction: row; /* 水平从左到右 */
}
优化导航栏样式与对齐
结合其他Flexbox属性可以让导航栏更美观实用。
- justify-content：控制主轴上的对齐方式，如 space-between 可使首尾项贴边，中间均匀分布
- align-items：控制交叉轴对齐，如 center 让项目垂直居中
- gap：设置项目之间的间距，比 margin 更简洁
完整示例：
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 16px;
padding: 1rem;
background-color: #333;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
基本上就这些。用 Flexbox 实现水平导航栏结构清晰、维护方便，配合 flex-direction 能灵活应对不同布局需求，是现代网页设计的标准做法。
