CSS布局实战教程-拓冰网站定制

布局是 CSS 里最让人头疼也最有成就感的部分。过去用 float、定位硬凑，代码又长又脆；现代 Flex 和 Grid 让布局变得清爽。本篇按实战顺序讲五个板块，每个都配可直接复制的代码。

一、Flex 布局

Flex 是一维布局，擅长横向或纵向排列一组元素。导航条、按钮组、卡片横排，首选 Flex。给父元素设 display: flex，它就变成了“伸缩容器”，子元素自动成为“伸缩项”。

.nav {
  display: flex;
  justify-content: space-between; /* 主轴：两端对齐 */
  align-items: center;             /* 交叉轴：垂直居中 */
  gap: 20px;
  flex-wrap: wrap;                 /* 放不下自动换行 */
}

.nav .logo {
  flex: 0 0 auto;     /* 不伸缩，按内容宽度 */
}

.nav .menu {
  flex: 1 1 auto;     /* 占据剩余空间 */
}

掌握 Flex 的关键是分清“主轴”与“交叉轴”：justify-content 管主轴对齐，align-items 管交叉轴对齐。用 flex-direction: column 可把主轴转成纵向。

二、Grid 布局

Grid 是二维布局，能同时控制行和列，适合卡片墙、仪表盘、整页骨架。它的语法比 Flex 多一点，但表达力强得多。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 三等分列 */
  grid-template-rows: auto;
  gap: 24px;
}

.gallery .feature {
  grid-column: span 2;   /* 跨两列 */
  grid-row: span 2;       /* 跨两行 */
}

拓冰提示 1fr 是“一份剩余空间”的单位。repeat(3, 1fr) 表示三列平均分。结合 minmax(240px, 1fr) 还能做出“不小于 240px、多了均分”的自适应网格，省掉媒体查询。

三、定位

定位（position）用来把元素从正常流里“抽出来”放到指定位置。日常最常用的是相对定位与绝对定位的组合：父元素 relative，子元素 absolute，子元素就相对父元素定位。

.badge {
  position: relative;          /* 父：相对定位作参照 */
}

.badge .new-tag {
  position: absolute;          /* 子：绝对定位 */
  top: -8px;
  right: -8px;
  background: #9E3B2E;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}

static：默认，正常流。
relative：相对自身原位置偏移，不脱离流。
absolute：脱离流，相对最近的非 static 祖先定位。
fixed：脱离流，相对浏览器视口（如悬浮客服）。
sticky：滚动到阈值前正常，到阈值后变固定（如吸顶导航）。

四、居中技巧

“居中”是 CSS 经典难题。好在现代布局给了几个一行就能搞定的写法。下面是从最推荐到备选的几种方案。

/* 方案一：Flex 居中（最推荐） */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方案二：Grid 居中（最短） */
.parent {
  display: grid;
  place-items: center;
}

/* 方案三：绝对定位 + transform（兼容老项目） */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

避坑提醒 文字垂直居中别再用 line-height 等于高度的老办法了——多行文字立刻破。优先用 Flex 或 Grid，省心又通用。

五、常见布局模式

把上面四块组合起来，就能拼出实战中 90% 的页面结构。拓冰列出几种最常用的：

顶栏 + 主体 + 页脚：整页用 Grid 切三行，主体撑满。
圣杯布局：左固定、右固定、中间自适应，用 Grid 三列最简单。
双栏（主 + 侧栏）：grid-template-columns: 1fr 320px。
卡片网格：repeat(auto-fill, minmax(280px, 1fr)) 自适应列数。
粘性页脚：用 min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;。

/* 粘性页脚：内容少时页脚也贴底 */
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

布局没有标准答案，但有一条原则：能用 Flex / Grid 就别用 float 和 hack。代码清爽，后期改起来也轻松。

CSS 布局实战教程

CSS 布局实战教程：Flex、Grid、定位与居中