Flexbox 布局：三张卡片

CSS Flexbox 弹性盒子布局

Flexbox（Flexible Box Layout）是 CSS 中最强大的一维布局工具。它让容器内的子元素能够灵活地排列、对齐和分配空间。

核心概念

Flex 容器 (Container) — 设置 display: flex 的元素

• 子元素自动成为 Flex 项目 (Items)
• 默认水平排列（主轴方向 = row）

两个轴：

• 主轴 (Main Axis) — 默认水平方向（左 → 右）
• 交叉轴 (Cross Axis) — 默认垂直方向（上 → 下）

.container {
  display: flex;          /* 开启 Flexbox */
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 交叉轴对齐 */
  gap: 16px;               /* 项目间距 */
}

为什么用 Flexbox？

Flexbox 解决了 CSS 中最常见的布局难题：居中 和 等分。

何时使用？

• 导航栏排列
• 卡片网格布局
• 表单对齐
• 页脚链接分布
• 任何需要一维排列的场景