CSS 布局详解

一、Flexbox 弹性布局

1.1 基本概念

.container {
  display: flex;           /* 开启 Flex 布局 */
  flex-direction: row;     /* 主轴方向: row | row-reverse | column | column-reverse */
  flex-wrap: wrap;         /* 换行: nowrap | wrap | wrap-reverse */
  /* flex-flow: row wrap;  简写 */
}

1.2 主轴对齐 justify-content

.container {
  justify-content: flex-start;    /* 左对齐 (默认) */
  justify-content: flex-end;      /* 右对齐 */
  justify-content: center;        /* 居中 */
  justify-content: space-between; /* 两端对齐，中间等分 */
  justify-content: space-around;  /* 每个项目两侧间隔相等 */
  justify-content: space-evenly;  /* 所有间隔完全相等 */
}

1.3 交叉轴对齐 align-items / align-content

.container {
  /* 单行对齐 */
  align-items: stretch;      /* 拉伸填充 (默认) */
  align-items: flex-start;   /* 顶部对齐 */
  align-items: flex-end;     /* 底部对齐 */
  align-items: center;       /* 居中对齐 */
  align-items: baseline;     /* 文字基线对齐 */

  /* 多行对齐 (需要 flex-wrap: wrap) */
  align-content: flex-start;
  align-content: space-between;
}

1.4 项目属性

.item {
  order: 0;           /* 排列顺序，数值越小越靠前 */
  flex-grow: 0;       /* 放大比例，0 表示不放大 */
  flex-shrink: 1;     /* 缩小比例，0 表示不缩小 */
  flex-basis: auto;   /* 初始大小 */
  /* flex: 0 1 auto;  简写 */
  /* flex: 1;         等于 flex: 1 1 0% */
  align-self: auto;   /* 单独设置交叉轴对齐 */
}

1.5 常见布局

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

/* 两栏布局：左固定右自适应 */
.two-column {
  display: flex;
}
.left { width: 200px; }
.right { flex: 1; }

/* 等分布局 */
.equal {
  display: flex;
}
.equal > * { flex: 1; }

/* 底部固定 */
.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content { flex: 1; }
.footer { /* 自动在底部 */ }

---

二、Grid 网格布局

2.1 基本概念

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;     /* 三列：固定 + 自适应 */
  grid-template-rows: 100px auto 100px;     /* 三行 */
  gap: 20px;                                 /* 行列间距 */
  /* row-gap / column-gap 分别设置 */
}

2.2 重复与自动填充

.container {
  /* 重复 3 列，每列 1fr */
  grid-template-columns: repeat(3, 1fr);

  /* 自动填充，每列最小 200px */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  /* 自动适应，会收缩空列 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

2.3 区域命名

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

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

2.4 项目定位

.item {
  grid-column: 1 / 3;      /* 占据第 1-2 列 */
  grid-row: 1 / 2;         /* 占据第 1 行 */
  /* 或者 */
  grid-column: span 2;     /* 跨 2 列 */
}

2.5 对齐

.container {
  justify-items: center;    /* 水平方向单元格内对齐 */
  align-items: center;      /* 垂直方向单元格内对齐 */
  justify-content: center;  /* 整个网格水平对齐 */
  align-content: center;    /* 整个网格垂直对齐 */
}

.item {
  justify-self: start;      /* 单个项目水平对齐 */
  align-self: end;          /* 单个项目垂直对齐 */
}

---

三、BFC 块级格式化上下文

3.1 什么是 BFC

BFC (Block Formatting Context) 是一个独立的渲染区域，内部元素的布局不会影响外部。

3.2 触发 BFC 的条件

/* 以下任一条件均可触发 BFC */
.bfc {
  overflow: hidden;          /* 常用方式 */
  overflow: auto;
  display: flow-root;        /* 最佳方式! 无副作用 */
  display: inline-block;
  display: flex;
  display: grid;
  position: absolute;
  position: fixed;
  float: left;               /* left 或 right */
}

3.3 BFC 的作用

1. 解决外边距合并

/* 问题：相邻元素的 margin 会合并 */
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距只有 30px，不是 50px */

/* 解决：给其中一个包裹 BFC 容器 */
.wrapper { display: flow-root; }

2. 清除浮动

/* 问题：父元素高度塌陷 */
.parent { /* 高度为 0 */ }
.child { float: left; }

/* 解决：父元素触发 BFC */
.parent { display: flow-root; }

3. 阻止元素被浮动覆盖

.float { float: left; width: 100px; }
.content { display: flow-root; }  /* 不再被浮动元素覆盖 */

---

四、居中方案大全

4.1 水平居中

/* 1. 行内元素 */
.parent { text-align: center; }

/* 2. 块级元素 - 定宽 */
.block { width: 200px; margin: 0 auto; }

/* 3. Flex */
.parent { display: flex; justify-content: center; }

/* 4. Grid */
.parent { display: grid; justify-items: center; }

/* 5. 绝对定位 */
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

4.2 垂直居中

/* 1. 单行文本 */
.single-line { line-height: 100px; height: 100px; }

/* 2. Flex */
.parent { display: flex; align-items: center; }

/* 3. Grid */
.parent { display: grid; align-items: center; }

/* 4. 绝对定位 + transform */
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 5. 绝对定位 + margin auto */
.child {
  position: absolute;
  top: 0; bottom: 0;
  height: 100px;
  margin: auto 0;
}

4.3 水平垂直居中

/* ⭐ 最佳方案：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%);
}

/* 绝对定位 + margin auto (已知宽高) */
.child {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 200px;
  height: 100px;
  margin: auto;
}

---

五、高频面试题

Q1: Flex 中 flex: 1 表示什么？

答案: flex: 1 等于 flex: 1 1 0%，即 flex-grow: 1（可放大），flex-shrink: 1（可缩小），flex-basis: 0%（初始大小为 0）。

Q2: BFC 是什么？有什么作用？

答案: BFC 是块级格式化上下文，是一个独立的渲染区域。作用：

1. 解决外边距合并
2. 清除浮动
3. 阻止元素被浮动覆盖

Q3: 如何实现水平垂直居中？

答案: 最推荐 Flex 方案：

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

Q4: Grid 的 auto-fill 和 auto-fit 有什么区别？

答案:

• auto-fill: 尽可能多地创建列，即使是空列
• auto-fit: 会收缩空列，让现有项目扩展填充