如何使用CSS Flexbox制作导航菜单_Flex布局实战案例-css教程-PHP中文网

如何使用CSS Flexbox制作导航菜单_Flex布局实战案例

P粉602998670

发布： 2025-11-06 23:30:02

原创

797人浏览过

使用CSS Flexbox可高效创建响应式导航菜单，通过display: flex实现横向布局，justify-content与align-items控制对齐，结合媒体查询适配移动端，支持Logo与右侧按钮布局，结构清晰且易于维护。

如何使用css flexbox制作导航菜单_flex布局实战案例

用CSS Flexbox制作导航菜单简单又高效，能快速实现响应式布局。Flex布局让菜单项自动对齐、等分布局、垂直居中变得非常容易，特别适合现代网页设计。

基本HTML结构

先搭建一个简洁的导航结构，使用nav标签和无序列表：

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

登录后复制

使用Flex布局排列菜单项

通过display: flex让列表横向排列，并控制间距和对齐方式：

.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  justify-content: space-around; /* 菜单项均匀分布 */
  align-items: center;           /* 垂直居中 */
  height: 60px;
}
<p>.navbar a {
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
padding: 10px 15px;
}</p><p>.navbar a:hover {
background-color: #555;
border-radius: 4px;
}</p>

登录后复制

说明：

justify-content: space-around 让每个菜单项之间留出均匀空隙
align-items: center 确保文字在导航栏中垂直居中
去除默认的list-style和链接下划线，使样式更干净

适配移动端（响应式）

当屏幕变小时，可以切换为竖向堆叠布局，适合手机查看：

立即学习“前端免费学习笔记（深入）”；

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

查看详情

@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
    height: auto;
  }
<p>.navbar a {
padding: 15px;
text-align: center;
}
}</p>

登录后复制

提示：

flex-direction: column 将菜单从横排变为竖排
配合媒体查询，实现基础的移动适配
可进一步添加汉堡按钮（需JavaScript）来控制展开收起

扩展：添加Logo与右侧菜单项

实际项目中，导航常包含Logo和右侧登录/语言等按钮。Flex的margin技巧可以轻松实现：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 0 20px;
  height: 60px;
}
<p>.logo {
color: white;
font-size: 1.5em;
font-weight: bold;
}</p><p>.nav-right {
display: flex;
gap: 10px;
}</p>

登录后复制

对应HTML：

<nav class="navbar">
  <div class="logo">LOGO</div>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
  <div class="nav-right">
    <a href="#">登录</a>
    <a href="#">注册</a>
  </div>
</nav>

登录后复制

基本上就这些。Flexbox让导航菜单布局变得直观且维护方便，不复杂但容易忽略细节。掌握这几个模式，就能应对大多数网站导航需求。

以上就是如何使用CSS Flexbox制作导航菜单_Flex布局实战案例的详细内容，更多请关注php中文网其它相关文章！