现代 CSS 布局实战：从 Flex 到 Grid 的完整掌握

布局是 CSS 的核心战场。从 table 布局到浮动布局，再到今天的 Flexbox 与 Grid，布局能力早已不是"切图"的活，而是工程化页面结构的基本功。本文系统讲解 Flex 与 Grid 两大布局体系，并给出常见场景的最佳实践。

一、Flexbox：一维布局的王者

Flexbox 处理"单方向上的一排/一列"，核心概念是主轴（main axis）与交叉轴（cross axis）。

1.1 容器属性

.container {
  display: flex;
  flex-direction: row;        /* 主轴方向：row | column */
  justify-content: center;    /* 主轴对齐：flex-start|center|space-between|space-around */
  align-items: center;        /* 交叉轴对齐：flex-start|center|stretch */
  flex-wrap: wrap;            /* 是否换行 */
  gap: 16px;                  /* 间距（现代浏览器全面支持） */
}

1.2 项目属性

.item {
  flex-grow: 1;      /* 剩余空间分配比例 */
  flex-shrink: 1;    /* 空间不足时收缩比例 */
  flex-basis: 200px; /* 初始尺寸 */
  /* 简写 flex: 1 1 auto; */
}

经典场景一：水平垂直居中

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

经典场景二：圣杯布局（等分布局）

.row { display: flex; gap: 12px; }
.col { flex: 1; }   /* 三列等分 */

经典场景三：吸底页脚

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main { flex: 1; }  /* 内容撑开，页脚被推到最底部 */

二、Grid：二维布局的终极方案

Grid 同时管理行与列，适合页面整体骨架与复杂网格：

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;      /* 三列：1:2:1 */
  grid-template-rows: auto 1fr auto;        /* 三行 */
  gap: 16px;
}

2.1 响应式网格

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

minmax(280px, 1fr) 的神奇：每列至少 280px，空间足够自动加列，空间不足自动换行——一行代码实现自适应卡片墙。

2.2 区域命名与显式放置

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 220px 1fr;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Grid 区域命名让布局意图在 CSS 里"看得见"，是后台管理布局的主流写法。

三、Flex 与 Grid 的选型决策

| 场景 | 推荐 | |------|------| | 一排按钮/图标/表单控件的对齐 | Flex | | 一行/一列内的空间分配与对齐 | Flex | | 页面整体骨架（顶栏+侧栏+主区） | Grid | | 卡片网格、自适应列数 | Grid | | 混合（局部二维嵌套） | 外层 Grid + 内层 Flex |

通用原则：一维用 Flex，二维用 Grid；Grid 定骨架，Flex 管细节。两者嵌套使用是常态。

四、现代布局的进阶特性

4.1 逻辑属性：国际化布局

/* margin-left → margin-inline-start（RTL 自动镜像） */
.card {
  margin-inline-start: 16px;
  padding-inline: 20px;
}

逻辑属性让阿拉伯语等 RTL 语言无需改布局。

4.2 容器查询（Container Queries）

.card-list {
  container-type: inline-size;   /* 声明容器 */
}

/* 容器宽度 < 400px 时应用 */
@container (max-width: 400px) {
  .card { flex-direction: column; }
}

容器查询让组件根据自身容器而非视口响应，是组件化页面的关键能力。

4.3 子网格（Subgrid）

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card-grid .card {
  display: grid;
  grid-template-rows: subgrid;   /* 卡片内行对齐父网格 */
}

五、常见布局问题速查

| 问题 | 解法 | |------|------| | 子元素溢出容器 | 检查 flex-shrink、min-width: 0（Flex 子项默认 min-width:auto） | | 文本过长撑破布局 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | | 图片等比缩放 | object-fit: cover; | | 多行文本截断 | -webkit-line-clamp: 2; display: -webkit-box; | | 垂直居中失效 | 检查容器是否 display: flex 且子项是否 align-self 覆盖 |

六、实战：一个完整的管理后台骨架

.admin {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.content {
  grid-area: content;
  overflow: auto;
  padding: 24px;
}

/* 列表行：图标 + 文字 + 操作按钮 一键对齐 */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

结语

现代 CSS 布局的核心理念是**"用语义化布局代替 hack"**：不再依赖负 margin、绝对定位与浮动清道夫。Flex 解决一维排列，Grid 解决二维骨架，逻辑属性与容器查询让布局真正可组件化。掌握这两套体系，你写布局的产出效率会肉眼可见地提升——更重要的是，页面结构变得更加健壮、可维护、可响应。