2.5 用 Flexbox 布局

知道了“每个元素都是一个盒子”，下一个问题是：怎么把这些盒子排列好？ 让导航菜单横着排、让内容垂直居中、让几张卡片均匀分布……在过去这些都很麻烦。现在我们有了 Flexbox（弹性盒子），它专为这类排列而生。

下面的实验有几个开关，调一调，看三个方块怎么实时重新排列。

一行代码开启 Flexbox

只要给容器加上 display: flex，它里面的直接子元素就会自动排成一行：

.container {
  display: flex;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

就这么简单，三个 <div> 从默认的“各占一行”变成了“并排一行”。

两根轴：主轴与交叉轴

Flexbox 的核心是理解两根轴：

• 主轴（main axis）：子元素排列的方向，默认是水平（从左到右）。

• 交叉轴（cross axis）：与主轴垂直的方向，默认是竖直。

有两个最重要的属性，分别控制这两根轴：

.container {
  display: flex;
  justify-content: center;  /* 主轴方向：怎么分布 */
  align-items: center;      /* 交叉轴方向：怎么对齐 */
}

justify-content 的常用取值：

• flex-start（默认，靠左/靠起点）

• center（居中）

• flex-end（靠右/靠终点）

• space-between（两端对齐，中间均分）

• space-around（每个元素两侧均分间距）

经典用法：完美居中

把一个元素水平且垂直居中，过去是 CSS 里的老大难。用 Flexbox，三行搞定：

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

改变方向

默认主轴是水平的，加 flex-direction: column 就能让子元素竖着排：

.container {
  display: flex;
  flex-direction: column;   /* 改成竖向排列 */
}