如何用Flex布局实现导航栏？

参考资料

1. 后代选择器详细说明以及案例
2. css颜色属性详细说明以及案例
3. display: flex/inline-flex示例
4. Flexbox 布局有哪些高级用法？
5. CSS网格详细说明以及案例
6. align-self: auto/stretch详细说明
7. css让div居中的几种方法
8. Flex布局如何优化页面加载速度？

基本概念

Flex布局（弹性盒子）是一种CSS布局模式，用于在容器内分配空间和对齐项目。

导航栏实现步骤

1. HTML结构

<nav class="navbar">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

2. CSS样式

.navbar {
  display: flex; /* 启用flex布局 */
  justify-content: space-around; /* 项目均匀分布 */
  align-items: center; /* 垂直居中 */
  background-color: #333;
  padding: 15px 0;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

关键属性说明

1. 容器属性：

• display: flex：定义flex容器

• flex-direction：主轴方向（row/column）

• justify-content：主轴对齐方式

• align-items：交叉轴对齐方式

2. 项目属性：

• flex-grow：放大比例

• flex-shrink：缩小比例

• flex-basis：初始大小

响应式示例

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
}

常见布局变体

1. 居右布局：

.navbar {
  justify-content: flex-end;
}

2. 等宽布局：

.navbar a {
  flex: 1;
  text-align: center;
}