UnoCSS 原子类使用指南：从入门到精通

点击下方链接查看参与活动有机会领取 iphone我的第一个开源项目：前端逐梦之旅与开源荣耀之巅 - vue-CSDN博客UnoCSS 是一个高性能、高度可定制的原子化 CSS 框架，它提供了丰富的原子类来快速构建现代 Web 界面。本文将详细介绍 UnoCSS 的核心类及其使用方法，帮助您快速上手并高效开发。一、布局类 (Layout)1.1 Flex 布局Flex 布局是创建响应式界面的强大工具，UnoCSS 提供了一系列原子类来控制弹性容器和子元素。核心类名及属性：类名对应 CSS使用场景flexdisplay: flex创建弹性容器flex-rowflex-direction: row水平排列子元素flex-colflex-direction: column垂直排列子元素flex-col-reverseflex-direction: column-reverse垂直排列子元素反转justify-startjustify-content: flex-start主轴起始对齐justify-betweenjustify-content: space-between两端对齐items-centeralign-items: center交叉轴居中对齐gap-4gap: 1rem子元素间距控制示例代码：htmldivdivItem A/divdivItem B/div/div1.2 Grid 布局Grid 布局适合复杂的二维布局，UnoCSS 提供了强大的网格系统。核心类名及属性：类名对应 CSS使用场景griddisplay: grid创建网格容器grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))3等分列布局col-span-2grid-column: span 2跨越2列gap-x-6column-gap: 1.5rem列间距控制响应式网格示例：html!-- 移动端垂直布局 --divh3overall significantly reduced/h3div v-for="(item, index) in features" :key="index"class="bg-white p-4 rounded-lg shadow-xs flex flex-col gap-4"divdiv{ { item.title }}/divdiv{ { item.text }}/div/divhrdiv{ { item.raise }}/div/div/div!-- PC端网格布局 --divdiv v-for="(item, index) in features" :key="index"class="bg-white p-6 rounded-xl shadow-sm flex flex-col gap-6"divdivh3{ { item.title }}/h3p{ { item.text }}/p/divsvg.../svg/divdiv{ { item.raise }}/div/div/div1.3 定位 (Position)定位类用于控制元素在文档流中的位置。核心类名及属性：类名对应 CSS使用场景relativeposition: relative相对定位容器absoluteposition: absolute绝对定位元素top-1/2top: 50%垂直居中定位left-0left: 0贴左定位translate-y-[-50%] transform: translateY(-50%)向上移动自身的50%z-10z-index: 10层级控制居中弹窗示例：htmldivdiv居中弹窗/div/div1.4字体大小类名UnoCSS 提供了一系列基于常见需求的预设字体大小类名，包括：极小文本：text-xs（如font-size: 0.75rem;）小文本：text-sm（如font-size: 0.875rem;）默认文本：text-base（默认大小，通常无需显式声明）中等文本：text-lg（如font-size: 1.125rem;）大文本：text-xl（如font-size: 1.25rem;）超大文本：text-2xl到text-9xl（如text-2xl对应font-size: 1.5rem;，text-9xl对应更大的值）示例：p极小文本/pp默认文本/ph1超大标题/h11.4.2、自定义字体大小如果预设值无法满足需求，可以通过以下方式自定义字体大小：直接指定数值使用text-[size]格式，支持px、em