正在加载...

CSS Flex 容器

Flexbox 入门已把父元素变成容器。本课聚焦容器：选定主轴、分配空间、在交叉轴上对齐，并处理换行。项目伸缩（flex-grow、flex-basis）留给 Flex Items 一课。

Flex 容器工具箱

📊 Flex 容器一览

属性	日常用途
`flex-direction`	设定主轴：`row`、`column` 或反向变体
`justify-content`	沿主轴分配项目
`align-items`	在交叉轴上对齐项目（单行）
`flex-wrap`	允许项目换到新行
`align-content`	在交叉轴上打包多行 flex
`gap`	在项目（与行）之间留白，避免 margin 拉扯

记住：justify 走主轴；align 走交叉轴。把 flex-direction 换成 column，这些角色会随轴一起旋转。

flex-direction — 选定主轴

默认是 row。侧栏导航或表单分组等纵向堆叠用 column。反向变体会翻转视觉顺序——请检查阅读顺序是否仍然合理。

纵向 flex 容器

css

.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

justify-content — 主轴分配

沿主轴分配剩余空间：flex-start、center、flex-end、space-between、space-around、space-evenly。页头常用 space-between。

Justify 变体

css

.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}

align-items — 交叉轴对齐

在单行上，align-items 控制行内的高度/垂直位置（或列内的水平位置）。默认是 stretch；center 是日常界面粘合剂。

项目居中对齐

css

.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}

换行与 align-content

使用 flex-wrap: wrap 时，多余项目会形成新行。当交叉轴还有剩余空间时，align-content 打包这些行——若 wrap 为 nowrap，它几乎不起作用。

打包换行后的行

css

.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}

冷静的容器习惯

先设 direction，再 justify，再 align-items，需要时再 wrap。用 gap 做间距。把逐项伸缩留给下一课——二维页面网格稍后再交给 CSS Grid。

具名容器角色

css

.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

动手试试

用 flex-direction: column 和三个块做一个 .stack。
在宽条上比较 justify-content: space-between 与 center。
提高 min-height，试 align-items: stretch 与 center。
让芯片换行并查看 align-content: flex-start。
写一句话：哪些属性属于接下来的项目，而不是容器？

常见错误

改方向后脑子里把 justify 和 align 搞反
使用 row-reverse 却不检查键盘/阅读顺序
在 nowrap 时期望 align-content 起作用
把 flex-grow 写在容器而不是项目上
用 Flexbox 容器属性去搭完整的二维 Grid 布局

小结

容器属性掌控方向、分配、对齐与换行
flex-direction 定义主轴
justify-content 与 align-items 分别对应主轴与交叉轴
Wrap 开启多行打包；align-content 打包这些行
项目级伸缩留给 Flex Items 一课

🧠 测试您的知识

准备开始

测试您的知识

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

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

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

语言