flex容器必须显式声明display:flex，所有flex工具类均依赖此前提；响应式需从最小断点开始逐级覆盖，避免断点遗漏导致行为异常。
flex容器必须显式声明，否则子项不生效
写了justify-between或items-center却没反应？大概率是父容器没加flex。Tailwind 不会自动推断你想要 Flex 布局——它只生成对应 CSS 属性，不补display: flex。
-
flex是前提，所有 Flex 工具类（justify-*、items-*、flex-col等）都依赖它 - 误写成
inline-flex时，容器行为像行内元素（宽度由内容撑开），不适合做全宽导航栏或卡片容器 - 用 DevTools 检查 computed 样式，确认
display确实是flex，别只看 class 列表
响应式 flex-direction 别只靠 md:，要覆盖所有断点
想让手机竖排、平板横排、桌面再竖排？不能只写md:flex-row，否则 640px–767px 区间（sm 断点）会回退到浏览器默认行为（通常是flex-row，但不可控）。
- 安全写法：
flex flex-col sm:flex-row md:flex-col，从最小断点开始逐级覆盖 - 注意：
sm:触发点是 ≥640px，不是“仅在平板”，漏掉它会导致小屏设备表现异常 - 如果项目自定义了
theme.screens（比如删了sm或改了md阈值），md:flex-row可能完全不生效，得去tailwind.config.js核对
flex-wrap 和 gap 的响应式必须同步控制
卡片列表在小屏挤成一团、大屏又太松散？问题常出在gap没配断点，或flex-wrap被忽略。
-
flex-nowrap是默认值，内容超宽时会被压缩甚至溢出；需要换行就得显式加flex-wrap -
gap-4在手机上可能太大，建议搭配sm:gap-2 md:gap-3渐进调整 - 别对单个子项设
flex-1就以为能均分——若父容器没设flex或没给定主轴方向，flex-1无效 - 用
flex-auto比flex-1更稳妥：它等价于flex: 1 1 auto，既可伸缩又尊重内容宽度
justify-* 和 items-* 的对齐逻辑容易反直觉
justify-center居中的是主轴（默认水平），items-center居中的是交叉轴（默认垂直）。很多人调了半天发现“文字没居中”，其实是用错了轴。
- 主轴方向变了，
justify-*作用就变：加了flex-col后，justify-center变成垂直居中 -
items-stretch是默认值，会让子项拉满交叉轴高度；如果不想拉伸，必须显式设items-start或items-center -
justify-between要求至少两个子项，只有一个时效果等同justify-start - 响应式对齐要写全：
justify-start sm:justify-between lg:justify-end，断点之间不继承
实际布局中，最常被忽略的是断点覆盖的连续性——Tailwind 的响应式不是“区间匹配”，而是“最小宽度生效+无覆盖即回退”。哪怕只漏一个sm:，640px 下的行为就可能脱离预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
