css 弹性布局与响应式设计_使用 flexbox 适应不同设备_技术教程

Flexbox容器需显式声明display: flex或inline-flex才能启用弹性布局，否则flex属性无效；flex-wrap: wrap是响应式换行关键，align-content仅多行生效，弹性分配应优先使用flex简写而非固定宽度。

很多初学者写完 flex-direction 或 justify-content 却没效果，根本原因是父容器没启用 Flex 上下文。CSS 不会自动把普通块级元素变成 flex 容器。

注意：display: flex 会让子元素默认成为 flex item，但不会继承 flex 属性；子元素的 float、clear、vertical-align 会被忽略。

默认情况下，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

响应式布局的核心是“弹性分配”，而非死守 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）

用 display: none 隐藏某列再用 display: block 显示，容易破坏 flex 流和语义顺序；而改 flex-direction 和 order 能保持 DOM 结构不变，且更利于无障碍访问。

例如侧边栏在桌面端右置、移动端置顶，不应靠 JS 搬移节点，而应：

aside { order: -1; }
@media (min-width: 769px) {
  aside { order: 2; }
}

flexbox 的响应能力不来自某个神奇属性，而来自组合：容器模式 +

换行控制 + 弹性分配 + 有序降级。最常被忽略的是 flex-wrap 的默认值和 flex-basis 与 width 的优先级冲突。

css 弹性布局与响应式设计_使用 flexbox 适应不同设备