flex默认即flex-row，无需重复声明；子元素未水平排列多因父容器宽高不足、flex-wrap换行或子项脱离flex流。
flex-row 是 Tailwind 的默认行为，不用额外写
如果你只写了 flex，主轴方向就是水平（row），flex-row 实际上是冗余的。Tailwind 的 flex 已经等价于 display: flex; flex-direction: row;，所以加不加 flex-row 效果一样。
常见错误现象：写了 flex flex-row 还发现子元素没水平排开——大概率是父容器没设宽高、子元素被 flex-wrap 换行了，或者某个子元素用了 flex-col / flex-shrink-0 之类干扰了布局流。
-
flex足够，flex-row可删 - 确认父容器有足够宽度，且未设置
flex-wrap: wrap（否则内容超宽会折行） - 检查子元素是否意外设置了
display: block或float，这会脱离 flex 流
子元素不水平对齐？看 justify-content 对应类
水平排布 ≠ 水平居中。Flex 主轴是水平的，但子元素默认左对齐。要居中、右对齐或均匀分布，得用 justify-content 的对应工具类。
使用场景：导航栏菜单居中、按钮组右对齐、表单控件等距排列。
立即学习“前端免费学习笔记（深入）”；
-
justify-start：左对齐（默认） -
justify-center：主轴居中 -
justify-end：右对齐 -
justify-between：首尾贴边，中间等距 -
justify-around：每个子项两侧留等量间隙
注意：justify- 类只在父容器为 flex 时生效；如果父容器是 grid 或普通 block，这些类无效。
内容换行了？可能是 flex-wrap 或子项尺寸问题
即使主轴是水平的，内容仍可能“竖着排”——其实是换行了。默认 flex-wrap: nowrap，但一旦子项总宽度超父容器，就会触发换行（除非你显式禁止）。
性能影响：频繁换行 + 大量子项可能引发重排，尤其在动态增删内容时。
- 强制不换行：加
flex-nowrap（即flex-wrap: nowrap） - 允许换行：用
flex-wrap（默认值），再配合justify-content和align-content控制多行对齐 - 子项宽度写死（如
w-32）或未设flex-shrink，容易撑爆容器导致意外换行
典型错误：给所有子项加 w-full 还想水平排——那必然每项占满一行。
在 React/Vue 中动态控制水平排布要注意什么
框架里用条件 class 很常见，比如 className={isHorizontal ? 'flex' : 'grid'}，但容易忽略状态切换时的样式残留或过渡抖动。
兼容性影响：旧版 Safari 对 flex 的某些组合（如 flex: 1 1 auto）解析不稳定，若需支持 iOS 12 以下，建议避免嵌套过深的 flex + min-w-0 组合。
- 避免在同一个元素上反复切换
flex/grid，DOM 重绘成本高；可改用hidden+ 两套布局并存 - 用
flex-basis相关类（如flex-[0_0_auto]）替代自定义 CSS，更易维护 - 服务端渲染（SSR）时若初始无
flex类，JS 注入后才加上，可能造成布局跳动——确保初始 HTML 就带必要结构类
最常被忽略的是：flex 容器里的子元素如果用了 absolute 定位，它就完全脱离 flex 流，justify- 类对其无效——这种“隐形脱离”很难一眼发现。
