Flexbox容器需显式声明display: flex或inline-flex才能启用弹性布局，否则flex属性无效；flex-wrap: wrap是响应式换行关键，align-content仅多行生效，弹性分配应优先使用flex简写而非固定宽度。
flexbox 容器必须显式声明 display: flex 或 display: inline-flex
很多初学者写完 flex-direction 或 justify-content 却没效果，根本原因是父容器没启用 Flex 上下文。CSS 不会自动把普通块级元素变成 flex 容器。
注意：display: flex 会让子元素默认成为 flex item，但不会继承 flex 属性；子元素的 float、clear、vertical-align 会被忽略。
- 移动端常用
display: flex+flex-direction: column布局主内容流 - 导航栏适配小屏时，可配合
@media (max-width: 768px)切换为flex-direction: column - 避免对
html或body直接设display: flex，易引发高度计算异常（如 100vh 失效）
flex-wrap: wrap 是响应式换行的关键开关
默认情况下，flex item 会强行挤在同一行（flex-wrap: nowrap），超出容器也不折行——这在窄屏上极易导致横向滚动或内容截断。
加了 flex-wrap: wrap 后，当总宽度超容器时，item 会自动换行，此时 justify-content 控制每行内的对齐，align-content 才控制行与行之间的间距。
立即学习“前端免费学习笔记（深入）”；
- 卡片列表响应式：给容器设
display: flex; flex-wrap: wrap;，每个卡片设固定flex: 0 1 280px（不放大、可缩小、基准宽 280px） - 不要只依赖
flex-basis，需配合min-width防止过度压缩（如min-width: 280px） -
align-content: space-between在多行时才生效；单行时用align-items
用 flex-grow/flex-shrink/flex-basis 替代固定像素宽度
响应式布局的核心是“弹性分配”，而非死守 px 值。直接写 width: 33.33% 在 flex 容器里反而可能被覆盖或失效。
flex 简写属性（如 flex: 1、flex: 0 1 auto）比单独设三个值更安全，也更符合响应意图。
-
flex: 1=flex-grow: 1; flex-shrink: 1; flex-basis: 0，适合等分剩余空间（如三栏导航） -
flex: 0 0 auto= 不伸缩、按内容宽，适合图标、头像等固定尺寸元素 - 慎用
flex: 1 1 100%，在窄屏下可能撑爆容器；优先用flex-basis: max-content或min(100%, 300px)（需配合width）
媒体查询中重置 flex 方向与顺序比隐藏/显示更可靠
用 display: none 隐藏某列再用 display: block 显示，容易破坏 flex 流和语义顺序；而改 flex-direction 和 order 能保持 DOM 结构不变，且更利于无障碍访问。
例如侧边栏在桌面端右置、移动端置顶，不应靠 JS 搬移节点，而应：
aside { order: -1; }
@media (min-width: 769px) {
aside { order: 2; }
}
-
order默认为 0，数值越小越靠前；负值合法且有效 - 避免对大量 item 使用
order，性能开销略高；仅用于关键结构切换 - 移动端慎用
flex-direction: row-reverse，可能影响阅读顺序和 tab 键焦点流
flex-wrap 的默认值和 flex-basis 与 width 的优先级冲突。 
