一、开启弹性布局1. flex作用说明flex把一个元素变成弹性容器Flex Container它的直接子元素会自动变成弹性项目Flex Item。之后这些子元素会沿一条主轴排列并可以使用对齐、伸缩、排序等 Flexbox 特性。flex是块级容器默认占满整行。!-- 父容器设置 flex子元素默认横向排列 --divclassflex gap-3divclassrounded-lg bg-blue-100 p-4项目一/divdivclassrounded-lg bg-blue-100 p-4项目二/divdivclassrounded-lg bg-blue-100 p-4项目三/div/div适用场景导航栏、按钮组、卡片头部、表单控件排列。只要需要让多个元素“排成一排或一列”通常第一步就是给父容器加flex。2. inline-flex作用说明inline-flex也能创建弹性容器但它本身表现得像行内元素只占据内容需要的宽度可以和其他文字或元素排在同一行。类名对应 CSS容器自身行为flexdisplay: flex块级占满整行inline-flexdisplay: inline-flex行内只占内容宽度!-- inline-flex 让按钮组与文字同处一行而不独占整行 --pclasstext-gray-700请选择spanclassinline-flex items-center gap-1 rounded bg-blue-50 px-2 py-1spanclasssize-2 rounded-full bg-blue-500/span已启用/span/p使用指南大多数独立布局容器用flex如果希望弹性容器作为文字中的一部分例如把图标和文字组合成一个小徽章使用inline-flex更合适。二、排列方向与换行1. flex-row / flex-col作用说明弹性项目沿“主轴”排列。flex-row让主轴沿水平方向子元素从左到右排列flex-col让主轴沿垂直方向子元素从上到下排列。类名主轴方向子元素排列效果flex-row水平从左到右flex-col垂直从上到下!-- 默认就是 row但显式写出来更清晰 --divclassflex flex-row gap-3spanclassrounded bg-gray-100 px-3 py-2左/spanspanclassrounded bg-gray-100 px-3 py-2中/spanspanclassrounded bg-gray-100 px-3 py-2右/span/div!-- 移动端菜单常常使用 flex-col 纵向排列 --navclassflex flex-col gap-2ahref#classrounded bg-gray-100 px-4 py-2首页/aahref#classrounded bg-gray-100 px-4 py-2产品/aahref#classrounded bg-gray-100 px-4 py-2关于/a/nav避坑指南主轴方向变了对齐类的含义也会跟着变。justify-*始终沿主轴items-*始终沿交叉轴。在flex-row里justify-center是水平居中在flex-col里它就变成垂直居中。2. 反向排列reverse作用说明在方向类后面加reverse可以反转子元素的排列顺序。flex-row-reverse是水平方向从右到左flex-col-reverse是垂直方向从下到上。类名排列效果flex-row-reverse水平反向从右到左flex-col-reverse垂直反向从下到上!-- 从右到左排列 --divclassflex flex-row-reverse gap-3spanclassrounded bg-gray-100 px-3 py-2第一项/spanspanclassrounded bg-gray-100 px-3 py-2第二项/span/div!-- 从下到上排列 --divclassflex h-40 flex-col-reverse gap-2spanclassrounded bg-gray-100 px-3 py-2底部/spanspanclassrounded bg-gray-100 px-3 py-2中间/spanspanclassrounded bg-gray-100 px-3 py-2顶部/span/div避坑指南反向排列只改变视觉顺序不改变 HTML 里的真实 DOM 顺序。屏幕阅读器和键盘导航仍然按 DOM 顺序进行因此不要用reverse来做真正重要的语义顺序调整如果顺序对可访问性很关键应调整 HTML 结构本身。3. flex-wrap 换行作用说明弹性项目默认不换行flex-nowrap会让所有子元素挤在一行必要时溢出。flex-wrap允许子元素在空间不足时换到下一行flex-wrap-reverse则反向换行。类名对应 CSS行为flex-nowrapflex-wrap: nowrap不换行默认值flex-wrapflex-wrap: wrap空间不足时正常换行flex-wrap-reverseflex-wrap: wrap-reverse空间不足时反向换行!-- 标签组允许换行避免小屏幕溢出 --divclassflex flex-wrap gap-2spanclassrounded-full bg-gray-100 px-4 py-1 text-sm前端/spanspanclassrounded-full bg-gray-100 px-4 py-1 text-smTailwind/spanspanclassrounded-full bg-gray-100 px-4 py-1 text-smFlexbox/spanspanclassrounded-full bg-gray-100 px-4 py-1 text-sm布局/spanspanclassrounded-full bg-gray-100 px-4 py-1 text-sm响应式/span/div适用场景标签云、商品卡片、筛选条件、头像组等需要“多了就换行”的布局。避坑指南使用flex-wrap后如果容器还有固定高度多出来的行会通过content-*控制对齐。另外gap在换行场景中表现很稳定比space-x-*更适合。三、对齐方式1. 主轴对齐justify-*作用说明justify-*控制弹性项目沿主轴方向的排列位置。主轴是flex-row时的水平方向也是flex-col时的垂直方向。类名效果justify-start从主轴起点开始排列justify-end从主轴终点开始排列justify-center在主轴上居中justify-between首尾贴边中间均匀分布justify-around每个项目两侧留相同空间justify-evenly所有间隔完全相等justify-stretch让项目拉伸填满主轴justify-normal使用默认排列!-- 导航logo 在左菜单在右 --navclassflex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-smspanclassfont-semibold text-gray-900Logo/spanspanclasstext-sm text-gray-600菜单/span/nav!-- 居中的按钮组 --divclassflex justify-center gap-3buttonclassrounded bg-gray-100 px-4 py-2取消/buttonbuttonclassrounded bg-blue-600 px-4 py-2 text-white确定/button/div使用指南justify-between是“两端对齐、中间留白”的经典写法特别适合页头。justify-around和justify-evenly的区别在于around的首尾空间是中间的一半evenly的所有间隔都一样。2. 交叉轴对齐items-*作用说明items-*控制弹性项目沿交叉轴方向的对齐。交叉轴与主轴垂直flex-row时是垂直方向flex-col时是水平方向。类名效果items-start对齐到交叉轴起点items-end对齐到交叉轴终点items-center在交叉轴上居中items-baseline按文字基线对齐items-stretch拉伸填满交叉轴默认值!-- 图标和文字垂直居中是最常见的用法 --buttonclassflex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2spanclasssize-4 rounded-full bg-blue-500/spanspanclasstext-sm text-gray-800查看详情/span/button!-- 不同字号也能按基线对齐 --divclassflex items-baseline gap-2spanclasstext-xl font-bold text-gray-900¥199/spanspanclasstext-sm text-gray-500起/span/div使用指南想让多个高度不一的元素在一条线上对齐items-center最常用价格、标题与辅助文字需要按文字底部对齐时用items-baseline。3. 多行对齐content-*作用说明当弹性容器有flex-wrap且出现多行时content-*控制这些“行”在交叉轴上的整体分布。只有多行时它才起作用单行容器看不出效果。类名效果content-start多行集中在交叉轴起点content-end多行集中在交叉轴终点content-center多行在交叉轴上居中content-between首尾贴边行与行之间均匀分布content-around每行上下留相同空间content-evenly所有行间间隔完全相等content-stretch拉伸各行填满交叉轴content-normal使用默认分布!-- 固定高度容器里多行内容在垂直方向两端分布 --divclassflex h-64 flex-wrap content-between gap-2 rounded-xl bg-gray-50 p-4spanclassw-full rounded bg-blue-100 p-3第一行/spanspanclassw-full rounded bg-blue-100 p-3第二行/spanspanclassw-full rounded bg-blue-100 p-3第三行/span/div避坑指南content-*只有在多行或多列布局里才有效。如果容器没有设置flex-wrap或者子元素都挤在一行content-center、content-between不会产生预期的效果。四、伸缩比例1. flex-1 / flex-auto / flex-none作用说明flex-*是flex-grow、flex-shrink、flex-basis三个属性的简写用来控制子元素如何分配剩余空间或收缩。类名对应 flex 简写含义flex-1flex: 1可以增长和收缩忽略初始尺寸常用于等分flex-autoflex: auto可以增长和收缩同时考虑初始尺寸flex-initialflex: 0 auto可以收缩但不能增长保留初始尺寸flex-noneflex: none完全不增长也不收缩保持原始尺寸!-- flex-1 让三个项目等分可用空间 --divclassflex gap-3divclassflex-1 rounded-lg bg-gray-100 p-4等分一/divdivclassflex-1 rounded-lg bg-gray-100 p-4等分二/divdivclassflex-1 rounded-lg bg-gray-100 p-4等分三/div/div!-- 侧边栏固定宽度主内容自动占满剩余空间 --divclassflexasideclassw-64 flex-none rounded-l-lg bg-gray-100 p-4侧边栏/asidemainclassflex-1 rounded-r-lg bg-white p-4 shadow-sm主内容区域/main/div使用指南等分布局优先用flex-1需要保持某个元素不被压缩时例如头像、图标、固定侧边栏用flex-none。flex-auto和flex-1都能填充剩余空间差别在于是否参考内容的初始尺寸大多数等分场景用flex-1更直观。2. grow / shrink / basis作用说明如果不需要一次设置三个属性可以分别使用grow、shrink、basis。grow控制增长比例shrink控制收缩比例basis控制初始尺寸。类名作用grow增长比例为 1grow-0禁止增长grow-2、grow-3按指定比例增长shrink收缩比例为 1shrink-0禁止收缩basis-数字按间距刻度设置初始宽度basis-full初始宽度 100%basis-auto根据内容自动确定初始尺寸!-- grow-2 的列比 grow-1 的列获得更多空间 --divclassflex gap-3divclassgrow rounded-lg bg-gray-100 p-4grow 默认 1/divdivclassgrow-2 rounded-lg bg-gray-100 p-4grow-2/div/div!-- 图标不收缩标题可以收缩 --divclassflex items-center gap-2spanclasssize-5 shrink-0 rounded-full bg-blue-500/spanspanclasstruncate text-sm text-gray-800这段标题很长时会收缩并显示省略号图标始终保持原大小。/span/div!-- basis 设置初始宽度之后仍可伸缩 --divclassflex gap-3divclassbasis-64 grow rounded-lg bg-gray-100 p-4初始 256px并允许增长/divdivclassbasis-1/2 rounded-lg bg-gray-100 p-4初始宽度 50%/div/div避坑指南在横向滚动或需要保持固定尺寸的元素上记得加shrink-0否则它们可能被压缩。basis-*是初始尺寸不是最终尺寸最终是否变化还取决于grow和shrink。五、单个子项的控制1. self-* 对齐作用说明self-*用于单独控制某个弹性项目在交叉轴上的对齐可以覆盖父容器items-*的设置。它写在子元素上而不是父容器上。类名效果self-auto跟随父容器的items-*默认值self-start对齐到交叉轴起点self-end对齐到交叉轴终点self-center在交叉轴上居中self-stretch拉伸填满交叉轴self-baseline按文字基线对齐!-- 父容器 items-center但某个项目单独靠上 --divclassflex h-40 items-center gap-3 rounded-xl bg-gray-50 p-4spanclassrounded bg-gray-100 px-4 py-2居中项/spanspanclassself-start rounded bg-blue-100 px-4 py-2单独靠上/spanspanclassself-end rounded bg-blue-100 px-4 py-2单独靠下/span/div!-- 拉伸某个子项填满容器高度 --divclassflex h-40 items-start gap-3divclassself-stretch rounded-lg bg-gray-100 p-4被拉伸/divdivclassrounded-lg bg-gray-100 p-4普通项/div/div适用场景同一行里有需要特殊对齐的元素例如评论列表里“头像靠上、内容居中”或按钮组里某个按钮需要单独拉伸。2. order 排序作用说明order-*可以改变弹性项目在视觉上的排列顺序而不用改动 HTML。数值越小越靠前order-first和order-last可以快速把元素放到最前或最后。类名作用order-数字设置具体排序值-order-数字设置负数排序值order-first放到最前面-9999order-last放到最后面9999!-- HTML 顺序是 A、B、C但视觉上显示为 B、A、C --divclassflex gap-3divclassorder-2 rounded-lg bg-gray-100 p-4A/divdivclassorder-1 rounded-lg bg-gray-100 p-4B/divdivclassorder-3 rounded-lg bg-gray-100 p-4C/div/div!-- 移动端把主要内容放在上面桌面端恢复自然顺序 --divclassflex flex-col md:flex-rowmainclassorder-2 md:order-1 flex-1 rounded-lg bg-white p-6主要内容/mainasideclassorder-1 md:order-2 w-full md:w-64 rounded-lg bg-gray-100 p-6侧边栏/aside/div避坑指南order只改变视觉顺序不影响键盘导航和屏幕阅读器的读取顺序。对于重要内容或交互组件优先调整 HTML 结构而不是依赖order来“补排序”否则可能造成可访问性问题。