正在加载...
CSS Flexbox
页面组件已经勾勒了外壳、栏、菜单和画廊。Flexbox 是沿一个方向排列项目的现代方式——行或列——少很多 float 折腾。打开 display: flex，认识 flex items，再在后续 Flexbox 课程中深入。
Flexbox 入门工具箱
📊 Flexbox 一览
| 概念 | 日常用途 |
|---|---|
| Flex 容器 | 设有 display: flex（或 inline-flex）的父元素 |
| Flex 项目 | 参与 flex 布局的直接子元素 |
| 主轴 | 项目行进的主方向（默认是行） |
| 交叉轴 | 用于对齐的垂直方向 |
gap |
项目之间的内置间距 |
| 后续课程 | 容器属性、项目属性、响应式 flex 模式 |
Flexbox 在一维上最强。完整的二维页面网格要等 Grid 模块，它排在这条 Flexbox 轨道之后。
打开 flex 容器
在父元素上设置 display: flex。子元素变成 flex items，默认排成一行。
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
用 gap，别跟 margin 较劲
gap 在项目之间留空，无需 collapse 花招。均匀分隔 flex 子项时优先用它。
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
沿主轴把项目推开
justify-content 沿主轴分配多余空间。space-between 是经典页眉模式：品牌在左，操作在右。
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
在交叉轴居中——以及两轴都居中
align-items: center 在交叉轴上对齐项目。配合 justify，可在盒子里做出冷静的居中集群。
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
行放不下时换行
flex-wrap: wrap 让项目落到下一行——画廊里你已经瞥见过。Flex Responsive 课会走得更远。
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
冷静的 Flexbox 习惯
把 Flexbox 用于一维的行与列：导航、工具栏、卡片行、居中。接着学容器细节，再学项目伸缩，然后是响应式 flex。别指望单靠 Flexbox 取代每一种 Grid 布局。
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
自己动手试
- 做一个带
display: flex和三个按钮的.toolbar。 - 加上
gap和align-items: center。 - 用
justify-content: space-between做页眉。 - 用 justify + align 在盒子里居中一对按钮。
- 写下哪一节后续课会讲
flex-grow/flex-basis。
常见错误
- 没有布局目标就往每个包裹层撒
display: flex - 指望 Flexbox 表现得像完整二维 Grid
- 用随机 margin 抢间距，而不是
gap - 跳过后续课，只死记这节入门
- 明明 flex 行更清晰，却永远停在 float 行
小结
- Flexbox 沿一条主轴排列项目
display: flex创建容器；子元素是 flex itemsgap、justify-content和align-items打开日常行布局- Wrap 是对响应式行的一瞥；更多内容在后面
- 容器、项目与响应式 Flexbox 课接下来深化这一模型
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
7
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部