第17话：会幕 - CSS 漫画大冒险

移动的会幕

🧑‍🦱

Young David (少年大卫):
旷野的会幕不是死的建筑，它是灵活 (Flexible) 的！
我们要用 display: flex 来建造一个可以随时调整布局的容器。

🦊

Little Fox (小狐狸):
以前用 Float 排版就像搬石头，累死我了。
Flexbox 真的有那么神奇吗？

主轴与交叉轴

⮕ Main Axis (主轴)

⬇ Cross Axis (交叉轴)

记住口诀：

利未人的排列

Justify-Content (主轴对齐):

Align-Items (交叉轴对齐):

神迹 (Magic): 想要垂直居中？
justify-content: center; align-items: center;
这是 CSS 历史上最伟大的胜利！

恩赐的大小 (Flex Grow)

有些祭司需要承担更多责任（占更多空间）。

Flex-Grow: 1

中间的祭司 (Gold) 设置了 flex-grow: 1，他会吞掉所有剩余的空间。

⚔️ 操练场 (Training Ground)

任务： 完美的居中。

问题：如果你想让一个元素在容器里水平和垂直都居中，你需要哪两个咒语？

.container {
  display: flex;
  justify-content: ;
  align-items: ;
}