# 实战案例

URL: https://caijiao.org/css/07-flexbox/04-case
Source: docs/css/07-flexbox/04-case.md
Description: 通过一个实战案例，综合运用 Flexbox 容器与项目属性，实现响应式导航栏布局，提升页面结构与交互体验。

利用 Flexbox 创建一个响应式导航栏，实现菜单项水平排列，支持居中对齐和空间均匀分布。

### 实现目标

- 水平排列菜单项
- 菜单项居中显示
- 两端间距自动填充
- 鼠标悬停高亮效果

## 实战案例示例

[在线代码演示](/css/demos/18.html)