Tailwind CSS Flex 与 Grid 布局完全指南10 个实用布局实战案例【免费下载链接】tailwindcssA utility-first CSS framework for rapid UI development.项目地址: https://gitcode.com/GitHub_Trending/ta/tailwindcssTailwind CSS 是一个 utility-first 的 CSS 框架让你直接在 HTML 里用工具类完成页面布局。本指南聚焦两大布局引擎——Flex 弹性布局与Grid 网格布局通过 10 个可直接套用的实战案例帮你在 10 分钟内掌握何时用 Flex、何时用 Grid并写出响应式、可维护的现代界面。一、Flex 还是 Grid30 秒看懂选型规则维度Flex弹性布局Grid网格布局思维模型一维先内容后空间二维先画格子再放内容擅长场景导航栏、按钮组、表单行卡片墙、圣杯布局、整页骨架控制方向flex-row/flex-colgrid-cols-*/grid-rows-*响应式flex-wrap换行直接改列数即可经验法则组件内部的一行一列元素排布用 Flex页面级、行列同时参与的布局用 Grid。Tailwind 对两者的工具类覆盖非常完整源码中 canonicalize-candidates.ts 可以看到flex、grid等类名到 CSS 属性的完整映射逻辑。二、快速开始5 分钟搭好布局环境Tailwind CSS 4 无需配置文件安装后在入口 CSS 中引入即可import tailwindcss;框架的默认工具集入口见 packages/tailwindcss/index.css官方自带的 Vite 示例工程可直接参考 playgrounds/vite/src/index.html。三、10 个高频布局实战案例案例 1元素垂直居中Flex 最经典用法让内容在容器内水平和垂直同时居中只需两个类classflex items-center justify-center min-h-screenmin-h-screen撑满视口items-center控制交叉轴对齐justify-center控制主轴对齐——这是弹窗、404 页面的基础。案例 2导航栏左右分布布局header classflex items-center justify-between px-4 py-3 span classtext-xl font-boldLogo/span nav classflex gap-6…菜单项…/nav /headerjustify-between把首尾元素推到两端中间元素自动均分gap-6是比 margin 更干净的间距方案Tailwind 的间距工具类基于统一的间距标度theme可按需换成gap-2到gap-16。案例 3按钮组均分宽度三个按钮平分一行不用算百分比div classflex gap-3 button classflex-1月付/button button classflex-1季付/button button classflex-1年付/button /divflex-1等价于等份拉伸。想要两个按钮 2:1 分配把其中一个换成flex-[2]即可。案例 4横向滚动标签条div classflex gap-2 overflow-x-auto pb-2 span classshrink-0 px-3 py-1 rounded bg-gray-100全部/span span classshrink-0 px-3 py-1 rounded bg-gray-100精选/span … /divoverflow-x-auto开启滚动shrink-0防止子项被压缩变形。手机端筛选标签横滑效果一行搞定。案例 5响应式产品卡片墙Grid 最常用div classgrid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 …卡片们… /div断点语义手机 1 列、平板 2 列、桌面 3 列。gap-6同时作用于行间距与列间距比逐个写 margin 简洁得多。这是电商列表、博客瀑布流入口的标准写法。案例 6圣杯布局侧边栏 主区 右栏div classgrid grid-cols-[240px_1fr_240px] gap-4 min-h-screen aside左侧菜单/aside main主内容/main aside右侧信息/aside /div任意值语法grid-cols-[...]让你不写 CSS 就能定义精确列宽。小屏时改成grid-cols-1实现纵向堆叠classgrid grid-cols-1 lg:grid-cols-[240px_1fr_240px] gap-4后台管理系统骨架 10 行代码搭完。案例 7屏幕居中弹出层div classfixed inset-0 grid place-items-center bg-black/50 div classw-96 rounded-lg bg-white p-6…弹窗内容…/div /divplace-items-center是 Grid 独有的一行居中神器等价于 Flex 的items-center justify-center二合一适合遮罩层、Toast 定位。案例 8多列文本排版CSS ColumnsGrid 解决不了两列等高文本流此时用多列工具类article classcolumns-2 gap-8 text-sm leading-6…长文…/article文字自动在两列间瀑布流分布报纸式排版零成本实现。案例 9自适应网格列数随窗口自动增减不想写断点把列宽最小 220px交给浏览器classgrid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-4窗口宽就自动多排几列窄屏自动减列——图片库、仪表盘小部件布局的首选代码量比 4 个断点类还少。案例 10吸顶侧边栏 长列表div classgrid grid-cols-[1fr_300px] section classspace-y-4…长文…/section aside classsticky top-20 self-start目录/广告位/aside /divsticky top-20让右侧栏跟随滚动钉在视口下方配合self-start防止 Grid 默认拉伸把 sticky 效果吃掉。这是Grid 搭骨架 粘性定位做交互的组合拳。四、新手最容易踩的 4 个坑flex-1里放长文本会溢出给被压缩的子项加min-w-0让文字正常换行。Grid 子项默认会被拉满整行需要固定尺寸时给子项加self-start。间距别乱用 margin优先gap-*它只在子项之间生效不会污染容器边缘。响应式前缀要按序写sm:→md:→lg:从小到大后者覆盖前者顺序写反会失效。五、项目内相关源码速查想深入理解这些工具类的实现与规范化规则可以浏览以下路径默认工具类入口packages/tailwindcss/utilities.css工具类候选项规范化含flex、grid别名解析packages/tailwindcss/src/canonicalize-candidates.ts框架核心 API 入口packages/tailwindcss/src/index.ts完整样式入口utilities / theme / preflight 汇总packages/tailwindcss/index.css可运行的 Vite 示例工程playgrounds/vite/六、总结一页纸记忆卡Flexflex开局justify-*管主轴items-*管交叉轴gap-*管间距。Gridgrid grid-cols-*定列任意值grid-cols-[…]定精确列宽place-items-center一行居中。选型组件内部用 Flex页面骨架用 Grid两者混用才是真香用法。响应式sm:/md:/lg:前缀 断点列数告别媒体查询。掌握这 10 个案例你已能覆盖日常 90% 的布局需求。从 playgrounds/vite/ 示例工程起步动手练习半小时就能建立肌肉记忆——布局自由从现在开始 【免费下载链接】tailwindcssA utility-first CSS framework for rapid UI development.项目地址: https://gitcode.com/GitHub_Trending/ta/tailwindcss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考