使用UIkit可通过.uk-grid和Flex类快速构建响应式布局，结合断点前缀实现多设备适配，利用嵌套与间距控制优化结构，无需自定义CSS即可搭建灵活页面。
使用UIkit搭建弹性网格布局非常简单，主要依赖其内置的 Flex 和 Grid 工具类。这些类基于现代CSS Flexbox构建，无需编写额外样式即可实现响应式、对齐灵活的页面结构。
理解UIkit Grid基础结构
UIkit的网格系统通过容器 .uk-grid 和子项 .uk-width-* 类来划分布局。网格默认支持多断点，适配不同屏幕尺寸。
- .uk-grid：主容器，启用网格布局
- .uk-child-width-1-2：子元素每行两个等宽项
- .uk-width-1-3@m：在中等及以上屏幕占1/3宽度
示例：
<div class="uk-grid"> <div class="uk-width-1-2@m">左侧内容</div> <div class="uk-width-1-2@m">右侧内容</div> </div>
使用Flex工具控制对齐与方向
UIkit提供一系列 Flex 工具类，用于设置容器的主轴、交叉轴对齐方式和换行行为，比传统浮动更直观。
立即学习“前端免费学习笔记（深入）”；
- .uk-flex：启用Flex布局容器
- .uk-flex-center：水平居中子元素
- .uk-flex-between：两端对齐，间距分布中间
- .uk-flex-around：间隙均匀分布在项目周围
- .uk-flex-top / .uk-flex-middle / .uk-flex-bottom：垂直对齐
例如让导航菜单居中对齐：
<nav class="uk-flex uk-flex-between uk-flex-middle"> <div>Logo</div> <ul>菜单项...</ul> </nav>
响应式断点与动态调整
UIkit支持五种断点前缀，可针对不同设备单独设置布局样式：
- @s：小屏（640px）
- @m：中屏（960px）
- @l：大屏（1300px）
- @xl：超大屏（1600px）
比如在手机上堆叠，在桌面并排：
<div class="uk-flex uk-flex-column uk-flex-row@m"> <div class="uk-width-1-2@m">内容块1</div> <div class="uk-width-1-2@m">内容块2</div> </div>
嵌套与间距控制
UIkit网格支持嵌套，同时可通过 .uk-grid-small、.uk-grid-medium 等类控制列间距。
- .uk-grid-collapse：无间距
- .uk-grid-row-small：控制行间距
嵌套示例：
<div class="uk-grid-medium" uk-grid>
<div class="uk-width-2-3@m">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-2">内层左</div>
<div class="uk-width-1-2">内层右</div>
</div>
</div>
<div class="uk-width-1-3@m">侧边栏</div>
</div>
基本上就这些。掌握Grid和Flex类的组合使用，就能快速搭建出结构清晰、响应灵敏的页面布局，无需一行自定义CSS。关键是熟悉类名规则和断点逻辑，用好语义化命名提升开发效率。不复杂但容易忽略细节对齐方式和嵌套层级。
