CSS 布局与可视化高频：居中、BFC、Flex 与 Grid

系列文章目录

《JavaScript 基础与进阶笔记》（前期偏基础巩固与常见面试点，后续进入闭包、异步、工程化等进阶主题）

• 第 01 篇：数据类型与类型判断
• 第 02 篇：变量声明与作用域
• 第 03 篇：闭包与高阶函数
• 第 04 篇：函数工厂
• 第 05 篇：this 指向与绑定
• 第 06 篇：原型与原型链
• 第 07 篇：类与继承
• 第 08 篇：JS 执行机制与异步队列
• 第 09 篇：数组常用方法
• 第 10 篇：字符串算法
• 第 11 篇：常见手写题合集（上）
• 第 12 篇：常见手写题合集（下）
• 第 13 篇：Promise 与 async/await
• 第 14 篇：数据结构基础
• 第 15 篇：垃圾回收与内存
• 第 16 篇：DOM 基础全面解析
• 第 17 篇：DOM 性能与渲染
• 第 18 篇：DOM 交互补充
• 第 19 篇：DOM 实战案例
• 第 20 篇：CSS 布局与可视化高频（本文）

前言

DOM 阶段结束后，页面「长什么样、怎么排」交给CSS 布局。面试与日常开发最高频的几块：居中、BFC、Flex、Grid。本篇按「居中 → BFC → Flex/Grid → 选型」展开，每个都给出最小 CSS 与易混点；移动端viewport、rem等放在下一篇。

一、居中方案

1.1 方案对照

1.2 常用代码

/* Flex — 最常用 */.flex-center{display:flex;justify-content:center;align-items:center;min-height:200px;}/* Grid — 最简 */.grid-center{display:grid;place-items:center;min-height:200px;}/* 绝对定位 + transform — 弹窗常用 */.modal-wrap{position:relative;min-height:100vh;}.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}/* margin: 0 auto — 仅水平 */.box{width:400px;margin:0 auto;}

注意：translate的-50%相对自身宽高；place-items对齐的是grid 单元格内的项，不是justify-content那套 flex 主轴语义。

二、BFC（块级格式化上下文）

2.1 是什么

BFC是一块独立布局区域：内部块级盒垂直排列；与外部布局隔离，常用于解决：

1. 清除浮动（父元素高度包含浮动子元素）
2. 阻止 margin 折叠（把其中一个盒子包进新 BFC）
3. 自适应两栏（左 float + 右 BFC，右侧不与 float 重叠）

2.2 如何触发

/* 清除浮动 — 高度塌陷 */.clearfix{display:flow-root;}/* 防止与外部 margin 合并 */.section{display:flow-root;}.section .box{margin-top:24px;}/* 两栏：左浮动 + 右 BFC（现代可用 Flex/Grid 替代） */.layout{display:flow-root;}.layout .aside{float:left;width:200px;}.layout .main{overflow:hidden;/* 触发 BFC，不与 float 重叠 */}

面试口述：margin 折叠发生在同一 BFC内相邻块级盒；不同 BFC之间不合并。父元素包不住浮动，是因为没形成 BFC，flow-root让父高度计入浮动子元素。

三、Flex 布局（一维）

3.1 主轴与交叉轴

• flex-direction: row（默认）：主轴水平，交叉轴垂直。
• justify-content：主轴对齐（flex-start/center/space-between…）。
• align-items：交叉轴对齐。
• flex-wrap: wrap：换行。

3.2flex简写（面试高频）

flex: grow shrink basis

/* 三栏：左右固定，中间自适应 */.page{display:flex;gap:16px;min-height:100vh;}.sidebar{flex:0 0 200px;}.main{flex:1;}/* 自适应卡片行 */.cards{display:flex;flex-wrap:wrap;gap:12px;}.card{flex:1 1 280px;}

易混：flex: 1不是1 1 auto；要等分列且忽略内容初始宽，basis 才是0%。flex-shrink: 0可防止被压扁。

四、Grid 布局（二维）

4.1 与 Flex 分工

4.2grid-template-areas（页面布局）

.app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:64px 1fr 48px;grid-template-areas:"header header""sidebar main""footer footer";gap:8px;min-height:100vh;}.header{grid-area:header;}.sidebar{grid-area:sidebar;}.main{grid-area:main;}.footer{grid-area:footer;}

4.3 响应式网格

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

auto-fit+minmax(280px, 1fr)：列宽至少 280px，空间够则自动增减列数，常用于商品卡片、相册。

fr：按比例分配剩余轨道空间；1fr 1fr两列等分（内容极大时会被minmax撑开）。

五、布局选型口诀

六、易混淆点归纳

1. margin: 0 auto不能垂直居中；要有width。
2. BFC解决的是布局隔离，不是「万能清除浮动 class」的玄学。
3. flex: 1的basis 常为 0%，与flex: auto不同。
4. Grid 管二维，Flex 管一维；可 Grid 分大块，块内再 Flex。
5. gap替代子项margin更干净，Flex/Grid 均支持。
6. place-items（Grid）≠place-content；居中子项用place-items: center。

七、思考与练习

1.块级元素水平居中，最少需要什么 CSS？

解析：固定width+margin: 0 auto；或父级Flex/Grid居中。

2.两个相邻div的margin-top/bottom都是 20px，间距是多少？

解析：20px（margin 折叠），同一 BFC 内垂直相邻块级盒取较大值。

3.flex: 1与flex: 1 1 auto在子项内容很宽时有何差别？

解析：flex: 1（basis 0）更易均分剩余空间；autobasis会先按内容宽度再伸缩。

4.实现「侧边栏 240px + 主区域占满剩余」，现代首选？

解析：Flex（sidebar: 0 0 240px; main: flex:1）或Grid（240px 1fr）。

5.repeat(auto-fit, minmax(250px, 1fr))做什么？

解析：列最小 250px，容器变宽时自动增加列数，卡片网格响应式。

总结

• 居中：业务优先Flex/Grid；弹窗可用absolute + transform。
• BFC：flow-root清浮动、防 margin 合并、与 float 分栏。
• Flex：一维；flex: 1与basis是面试常问。
• Grid：二维；template-areas搭页面；auto-fit/minmax做响应式网格。

下一篇讲移动端与 viewport：rem/vw、safe-area、1px 与高清图等。