移动的会幕
🧑‍🦱
Young David (少年大卫):
旷野的会幕不是死的建筑,它是灵活 (Flexible) 的!
我们要用 display: flex 来建造一个可以随时调整布局的容器。
🦊
Little Fox (小狐狸):
以前用 Float 排版就像搬石头,累死我了。
Flexbox 真的有那么神奇吗?
主轴与交叉轴
⮕ Main Axis (主轴)
⬇ Cross Axis (交叉轴)

记住口诀:

  • justify-content 管主轴 (通常是水平)
  • align-items 管交叉轴 (通常是垂直)
利未人的排列
Justify-Content (主轴对齐):


Align-Items (交叉轴对齐):
1
2
3
神迹 (Magic): 想要垂直居中?
justify-content: center; align-items: center;
这是 CSS 历史上最伟大的胜利!
恩赐的大小 (Flex Grow)

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

1
Flex-Grow: 1
1

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

⚔️ 操练场 (Training Ground)

任务: 完美的居中。

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

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