使用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 能灵活应对不同布局需求，是现代网页设计的标准做法。