flex设置水平导航

Flex布局是一种CSS弹性盒模型，用于创建响应式、灵活的网格系统。如果你想要设置一个水平导航栏，可以利用`display: flex;`属性以及一些相关的flex属性来控制。以下是基本步骤：

1. **容器样式**：首先给包含导航链接的元素设置 `display: flex;` 和 `justify-content` 属性，`justify-content` 决定项目如何沿主轴（默认是横轴）对齐。常见的选项有：
- `flex-start`: 左对齐
- `center`: 居中
- `space-between`: 两端对齐，项目之间的间距相等
- `space-around`: 等间距分布，每个项目两侧都有间隔

nav {
  display: flex;
  justify-content: space-between;
}

2. **链接样式**：导航链接通常使用 `flex-grow`, `flex-shrink` 或 `flex-basis` 来调整大小和对齐。比如：
- 设置 `flex-grow: 1;` 让它们根据可用空间动态伸缩。
- 如果需要固定宽度，可以设置 `flex-basis: auto` 或一个具体的值。

nav a {
  flex: 0 0 auto; /* 或者 flex-grow: 1; */
  /* 其他样式如：padding, color, etc... */
}

3. **添加媒体查询**：如果想让导航在不同屏幕尺寸下有不同的行为，可以使用媒体查询调整flex设置。

记得将这些样式应用于HTML结构中的导航元素上，例如 `<ul>` 或 `<nav>`:

<nav class="flex-nav">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <!-- 更多链接 -->
</nav>