Flexbox本身不响应屏幕尺寸变化，必须依赖媒体查询触发布局切换；移动端应默认column堆叠，flex-direction等属性须在min-width媒体查询中按需启用，否则小屏易溢出或错乱。
Flexbox 本身不响应屏幕尺寸变化，必须靠媒体查询触发布局切换；直接在根容器上写死 flex-direction: row 或 flex-wrap: wrap 是最常见的翻车起点。
为什么 flex-direction 必须放进媒体查询里
移动端默认堆叠内容是安全的，但一旦在全局 CSS 里设了 flex-direction: row，小屏下子项就会强行横排，极易溢出或折行错乱。浏览器不会“智能降级”，它只会照着你写的执行。
- 移动端优先时，主容器只写
display: flex，flex-direction: column留给@media (min-width: 768px)里加 - 桌面端优先反向操作会埋坑：比如小屏下
flex-direction: row+ 文字多 → 水平滚动条藏都藏不住 -
justify-content的语义随主轴方向变化——space-between在 column 下是上下撑开，在 row 下才是左右分隔，不随方向同步改，对齐就失效
flex-wrap 和 flex-basis 怎么配才不挤
flex-wrap: wrap 不该默认开启。小屏内容密度高，强制换行可能把按钮、图标切成两半；大屏才有空间让卡片流式排列。
- 小屏（≤767px）用
flex-wrap: nowrap+ 子项设flex: 0 1 auto（不放大、可缩小、按内容宽），防拉伸变形 - 大屏（≥992px）再切
flex-wrap: wrap，配合子项flex: 0 1 280px控制最小宽度，避免卡片被压太窄 - 别在父容器写
flex: 1—— 它会让子项无视自身内容宽度强行占满，媒体查询一改方向，整个弹性逻辑就崩了
断点别抄 768px，要盯内容而不是设备
用浏览器 DevTools 缩放窗口，观察真实内容何时开始挤压：文字换行异常、图片裁剪、按钮重叠——那个像素值才是你的断点。硬套“平板 768px”可能让某些长标题在 760px 就已溢出，而另一些简洁布局到 850px 才需调整。
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (min-width: 48em)这类相对单位，比像素值更健壮 - 一个典型组合：
@media (min-width: 48em)切导航为横排，@media (min-width: 62em)让侧边栏脱离主内容流（flex-direction: row+ 主区域flex: 1） - 如果布局里有固定高度模块（如 banner 图），断点也要考虑其内部文字行高和 padding 是否还能容纳
最常被忽略的是：Flexbox 只作用于**直接子元素**。想让 .content 和 .sidebar 并排，不能只给它们加 class，得包一层新容器并设 display: flex——否则媒体查询再怎么切 flex-direction，也影响不到这两个兄弟元素的排列关系。
