正在加载...

CSS Flex 项目

Flex Container 管的是父容器。Flex 项目回答另一个问题：在那一行或一列里，每个子项如何伸长、收缩并从多大开始？先掌握 basis、grow 和 shrink，再去追响应式 flex 模式。

Flex 项目工具箱

📊 Flex 项目一览

属性 日常作用
flex-basis 分配剩余空间之前的主轴起始尺寸
flex-grow 该项目要占多少剩余空间（无单位系数）
flex-shrink 空间紧张时该项目多愿意收缩
flex grow、shrink、basis 的简写
align-self 对单个项目覆盖容器的 align-items
order 改变视觉顺序（少用——保持 DOM/无障碍合理）

把 basis 想成项目在主轴上的首选起始长度。然后 grow 与 shrink 再协商剩下的空余或不足空间。

flex-grow — 拿走剩余空间

系数为 1 时，项目可向空闲空间伸展。兄弟系数会竞争：两个 flex-grow: 1 的项目均分剩余。

Growing main column

css 
.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — 从一个尺寸起步

flex-basis 在 grow/shrink 计算之前设定主轴起始尺寸。做 flex 算法时优先用 basis；width/height 仍有意义，但 flex 原生起点是 basis。

Sidebar with basis

css 
.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — 把空间还回去

行太紧时，shrink 系数决定谁被压缩。flex-shrink: 0 可保护图标或固定侧栏不被挤扁。

Protect from squash

css 
.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

flex 简写

flex: grow shrink basis 把三者打包。常见稳妥默认：flex: 1（伸长、允许收缩、basis auto）给占满的子项；flex: 0 0 auto 给刚性小块。

Flex shorthand

css 
.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — 单个项目的交叉轴对齐

对单个子项覆盖容器的 align-items。适合让一个徽章贴到起点，而兄弟仍居中。

Align-self override

css 
.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

稳妥的 flex 项目习惯

先用 basis 定意图尺寸，再设 grow/shrink，最后用简写收整。少用 align-self。避免用 order 打乱键盘与读屏顺序——带媒体查询的 flex 模式留给 Flex Responsive。

Named item roles

css 
.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

自己动手

  1. 做一行 main + aside；给 main 设 flex-grow: 1。
  2. 用 flex-basis: 14rem 和 flex-shrink: 0 设置 aside。
  3. 用 flex-shrink: 0 保护一个图标。
  4. 用 flex 简写改写 grow/shrink/basis。
  5. 用 align-self 覆盖一个子项的交叉轴对齐。

常见错误

  • 把 flex-grow 写在容器上而不是项目上
  • 把 width 和 flex-basis 搞混，却奇怪 flex 计算对不上
  • 用 order 重排却破坏了 Tab/源码顺序
  • 因 shrink 仍是默认值而让 logo 被挤扁
  • 把本课当成 Flex Responsive 模块

小结

  • Flex 项目控制伸长、收缩与起始 basis
  • flex-grow 分配空闲空间；flex-shrink 分配挤压
  • flex-basis 是主轴上的 flex 起始尺寸
  • flex 简写与 align-self 细化单个子项
  • 响应式 flex 模式下一课再讲；谨慎使用 order

🧠 测试您的知识

准备开始

测试您的知识

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

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

📝 说明

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