震惊！前端新人5分钟学会完美九宫格布局，面试官看了都说好
我敢打赌，你肯定见过这种布局——
手机App首页那整整齐齐的功能入口、电商网站的商品展示、图片网站的画廊...没错，这就是前端开发中最常用的九宫格布局！
先看效果，再学技术
我们要实现的效果是这样的：
- 3列等宽布局
- 自动换行
- 间距均匀
- 鼠标悬停时有动效
- 响应式设计（手机、平板、电脑都能用）
效果图
上代码！（直接复制就能用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex九宫格布局</title>
</head>
<style>
/* 先把浏览器默认样式清掉 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 定义一个变量控制间距，改一处全改 */
:root {
--item-gap: 5px;
}
/* 容器样式 - 这是核心 */
.container {
display: flex; /* 开启Flex模式 */
flex-wrap: wrap; /* 超出一行时自动换行 */
gap: var(--item-gap); /* 设置子元素间距 */
padding: var(--item-gap); /* 给容器加个内边距 */
}
/* 每个格子的样式 */
.item {
/* 重点来了！计算宽度的公式必须这么写 */
width: calc((100% - 2 * var(--item-gap)) / 3);
height: 150px;
border: 1px solid #000;
transition: all 0.3s ease; /* 加个过渡效果 */
}
/* 鼠标悬停时的动效 */
.item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #e0e0e0;
}
/* 平板端适配 */
@media (max-width: 768px) {
.item {
width: calc((100% - var(--item-gap)) / 2); /* 2列布局 */
}
}
/* 手机端适配 */
@media (max-width: 480px) {
.item {
width: 100%; /* 1列布局 */
}
}
</style>
<body>
<div class="container">
<!-- 这里放九宫格内容 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
关键知识点解析
1. 为什么要清除默认样式？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这一步至关重要！不同浏览器有不同的默认样式，不清除的话，你做的布局可能在Chrome里正常，到了Firefox就变形了。
特别是box-sizing: border-box，这能确保你设置的宽度是元素的实际宽度，不会因为padding和border而变大。
2. CSS变量有多好用？
:root {
--item-gap: 5px;
}
用CSS变量就像给值起了个名字。比如你想把间距从5px改成10px，只需要改这一个地方，所有用到--item-gap的地方都会自动更新。
这比你一个个找代码改要高效多了，特别是在大项目里！
3. 最容易出错的地方：宽度计算
width: calc((100% - 2 * var(--item-gap)) / 3);
很多新人在这里翻车！
为什么是2 * var(--item-gap)？因为3列布局中间有2个间隙！
错误公式：100% / 3 - var(--item-gap) ❌
正确公式：(100% - 2 * var(--item-gap)) / 3 ✅
记住这个公式，面试说不定能用上！
4. 响应式设计是怎么实现的？
@media (max-width: 768px) {
.item {
width: calc((100% - var(--item-gap)) / 2);
}
}
这叫媒体查询。当屏幕宽度小于等于768px时，就会应用这套样式。
平板上用2列布局，手机上用1列布局，这样用户体验才好。
常见问题解答
Q：为什么我的九宫格右侧总有个小空隙？
A： 99%是宽度计算错误！再检查一下你的公式，是不是用了100% / 3 - var(--item-gap)？改成(100% - 2 * var(--item-gap)) / 3试试。
Q：怎么让每个格子里的内容居中？
A： 在.item里加几行代码：
.item {
/* 原有的代码 */
display: flex;
align-items: center;
justify-content: center;
}
Q：我想让每个格子的高度也自适应，怎么做？
A： 去掉height: 150px，然后根据需要调整内容。如果想要等高效果，可以用aspect-ratio: 1来保持宽高比。
实战小技巧
1. 快速换肤
在:root里多定义几个变量，就能轻松实现主题切换：
:root {
--primary-color: #4CAF50;
--border-color: #ddd;
--hover-color: #f5f5f5;
--item-gap: 10px;
}
写在最后
Flex布局是现代前端开发的必备技能，掌握了它，很多复杂的布局都会变得简单。
记住：
- 容器用
display: flex; flex-wrap: wrap; - 宽度计算用
(总宽度 - 间隙总和) / 列数 - 响应式设计用媒体查询
现在，复制代码，自己动手试试吧！有问题评论区见~
