正在加载...

CSS 响应式 Flex

Flex Items 负责每个子项的尺寸。响应式 Flex 接着问：当视口变窄时，这条 flex 行该换行、堆叠，还是翻转方向？先学几种沉稳的 media query 模式——深入的 Responsive Design 与 Media Queries 模块稍后介绍。

响应式 flex 工具箱

📊 响应式 flex 一览

工具 日常用途
flex-wrap 行太窄时让项目换到新行
flex-direction 在断点把 row ↔ column 切换以堆叠区块
Media query 仅在视口匹配时应用新的 flex 规则
flex-basis / min-width 决定卡片何时换行或并排
gap 换行时保持间距可靠
布局避免用 order 为键盘与读屏器保留 DOM 顺序

从可读的桌面（或移动优先）flex 基础开始。在一个清晰断点上，只改必须改的——换行、方向或 basis——不要一次改光所有属性。

flex-wrap —— 让行透透气

宽屏上卡片应成行排列，窄时换行而不是永远被压扁时，开启 wrap，并给每张卡片合理的 basis。

Wrapping card row

css 
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

断点处翻转方向

经典模式：宽视口并排，窄视口堆叠成列。在 media query 里改 flex-direction——HTML 保持不变。

Stack on small screens

css 
.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

用 basis 与 min-width 控制回流

把 wrap 与 flex-basis 或 min-width 搭配，让项目自己决定何时掉落。若某一尺寸始终换行不干净，断点也可以重置 basis。

Basis at a breakpoint

css 
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

窄视口不是另一种布局语言——还是同一套 flex 工具，只是取值不同。改方向或换行即可；不要另造一棵 HTML 树。

沉稳的响应式 flex 习惯

先定一个主断点。优先用 wrap 与方向翻转，少用 order 重排。保持源码顺序合理。流体图片、复杂断点体系和完整 Responsive 理论留给后续课程。

Named stack roles

css 
.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css 
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

自己动手

  1. 用 flex-wrap: wrap 与 flex: 1 1 14rem 建一行卡片。
  2. 在 max-width: 40rem 下把外壳翻成 flex-direction: column。
  3. 在小断点把工具栏操作设为 flex-basis: 100%。
  4. 加 min-width，让芯片换行而不是被压扁。
  5. 抵制用 order「修复」响应式布局。

常见错误

  • 只无限缩小项目，而不换行或堆叠
  • 把 order 当响应式布局工具，破坏 Tab 顺序
  • 忘记 flex-wrap，却奇怪卡片从不掉行
  • 把所有 flex 属性塞进一个巨型 media query
  • 把本课当成整个 Responsive Design 课程

小结

  • 响应式 flex 按宽度调整 wrap、方向与 basis
  • flex-wrap 配上合理的 basis/min-width 让行回流
  • Media query 翻转 flex-direction，在窄屏上堆叠
  • 偏好沉稳断点；布局技巧少用 order
  • 更深入的 Responsive 与 Media Queries 模块稍后到来

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 48 的 51
Css 教程