UIkit navbar 结合 Flex 布局可实现响应式导航，通过 uk-navbar-left、uk-navbar-right 和 uk-navbar-center 控制对齐，利用 uk-flex 与响应式宽度类（如 uk-width-auto@s）适配多端，配合 uk-toggle 与 uk-offcanvas 实现移动端汉堡菜单，轻松构建美观且兼容移动设备的导航栏。
UIkit 的 navbar 组件本身就具备响应式能力，结合 Flex 布局可以更灵活地控制导航结构在不同屏幕尺寸下的显示效果。通过 UIkit 提供的实用类和 Flex 容器特性，你可以轻松实现一个既美观又适配移动端的响应式导航栏。
使用 UIkit navbar 基础结构
UIkit 的 navbar 使用 元素并添加 uk-navbar 属性来初始化。基本结构如下：
<nav class="uk-navbar-container" uk-navbar><div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</nav>
这个结构会自动在小屏幕上折叠成汉堡菜单（需配合 JavaScript），左侧放品牌或主菜单，右侧放操作类链接。
结合 Flex 实现更灵活布局
虽然 uk-navbar-left 和 uk-navbar-right 内部已使用 Flex，但你可以在 navbar 内嵌套自定义 Flex 容器以实现更复杂的对齐或间距控制。
例如，让导航项在中等以上屏幕均分空间，在小屏幕堆叠：
<nav class="uk-navbar-container" uk-navbar><div class="uk-navbar-left uk-flex-1">
<ul class="uk-navbar-nav uk-flex uk-flex-wrap uk-flex-nowrap@s">
<li class="uk-width-1-1 uk-width-auto@s"><a href="#">首页</a></li>
<li class="uk-width-1-1 uk-width-auto@s"><a href="#">产品</a></li>
<li class="uk-width-1-1 uk-width-auto@s"><a href="#">服务</a></li>
</ul>
</div>
</nav>
-
uk-flex启用 Flex 布局 -
uk-flex-wrap允许在小屏换行 -
uk-width-auto@s表示从 small 屏幕开始自动宽度，不占满 -
uk-width-1-1在小屏下每个项目独占一行
响应式切换：折叠菜单与侧边栏
在移动设备上，通常将菜单隐藏并用汉堡按钮触发。UIkit 提供了 uk-toggle 与 uk-offcanvas 配合实现此功能。
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
示例：点击按钮展开侧边导航
<nav class="uk-navbar-container" uk-navbar><div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-toggle="target: #mobile-nav" href="#">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">菜单</span>
</a>
</div>
</nav><div id="mobile-nav" uk-offcanvas="mode: push">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-default">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
这样在小屏幕上只显示汉堡按钮，点击后滑出完整菜单，节省空间且用户体验良好。
自定义样式与 Flex 对齐增强
若需要居中 logo 并两侧分布菜单项，可使用 Flex 的 uk-flex-center 搭配自定义结构：
<nav class="uk-navbar-container" uk-navbar><div class="uk-navbar-left">
<ul class="uk-navbar-nav"><li><a href="#">←</a></li></ul>
</div>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav"><li><a href="#">菜单</a></li></ul>
</div>
</nav>
利用 uk-navbar-center 将 Logo 居中显示，左右区域分别放置返回或操作按钮，适合移动端应用类导航。
基本上就这些。UIkit navbar 本身轻量高效，结合 Flex 工具类能快速构建适应多端的导航结构，关键是理解其响应式断点与布局类的组合逻辑。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
