在CSS中实现响应式网格布局时，flex是一个灵活且兼容性较好的选择，它可以通过简单的属性配置适配不同屏幕尺寸，实现多列自适应排列的效果。下面我们逐步讲解具体的实现方法。
基础flex容器配置
首先需要给网格的父容器设置flex相关属性，开启flex布局模式，同时配置换行规则让子元素自动换行。
/* 网格父容器基础样式 */
.grid-container {
display: flex;
/* 允许子元素换行，这是实现多行网格的核心 */
flex-wrap: wrap;
/* 子元素之间的水平间距 */
gap: 20px;
/* 容器内边距，避免边缘子元素贴边 */
padding: 20px;
}
子元素宽度配置实现自适应列数
响应式网格的核心是不同屏幕尺寸下显示不同数量的列，我们可以通过设置子元素的基础宽度，结合flex的收缩和扩展属性实现这个效果。
固定列数的实现方式
如果需要在桌面端显示4列，平板端显示2列，移动端显示1列，可以给子元素设置不同屏幕尺寸下的宽度规则。
/* 网格子元素基础样式 */
.grid-item {
/* 默认基础宽度，桌面端4列时每列占约25%减去间距 */
flex: 1 1 calc(25% - 20px);
/* 最小宽度保证内容不被过度挤压 */
min-width: 200px;
height: 150px;
background-color: #f0f0f0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* 平板端适配：2列 */
@media (max-width: 992px) {
.grid-item {
flex: 1 1 calc(50% - 20px);
}
}
/* 移动端适配：1列 */
@media (max-width: 576px) {
.grid-item {
flex: 1 1 100%;
}
}
自动填充列数的实现方式
如果希望不需要手动写媒体查询，让网格自动根据容器宽度填充列数，可以结合min-width和max-width属性实现。
.auto-grid-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.auto-grid-item {
/* 最小宽度200px，最大占满剩余空间 */
flex: 1 1 200px;
max-width: 100%;
height: 150px;
background-color: #e8f4ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
对齐方式调整
可以通过父容器的justify-content属性调整子元素的水平对齐方式，比如让最后一行的子元素左对齐或者居中。
/* 子元素左对齐，最后一行的子元素也左对齐 */
.grid-container-left {
justify-content: flex-start;
}
/* 子元素居中对齐，最后一行的子元素也居中 */
.grid-container-center {
justify-content: center;
}
/* 子元素两端对齐，间距均匀分布 */
.grid-container-between {
justify-content: space-between;
}
完整示例代码
下面是一个完整的HTML和CSS示例，展示用flex实现响应式网格布局的完整效果。
<!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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 20px;
}
.grid-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background-color: #fafafa;
border-radius: 12px;
}
.grid-item {
flex: 1 1 calc(25% - 20px);
min-width: 200px;
height: 150px;
background-color: #4a90e2;
color: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
@media (max-width: 992px) {
.grid-item {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 576px) {
.grid-item {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<h1>flex实现响应式网格布局</h1>
<div class="grid-container">
<div class="grid-item">网格项1</div>
<div class="grid-item">网格项2</div>
<div class="grid-item">网格项3</div>
<div class="grid-item">网格项4</div>
<div class="grid-item">网格项5</div>
<div class="grid-item">网格项6</div>
<div class="grid-item">网格项7</div>
<div class="grid-item">网格项8</div>
</div>
</body>
</html>
注意事项
- 设置
flex-wrap: wrap是实现多行网格的必要条件，否则子元素会在一行内挤压排列。 - 使用
gap属性控制间距比手动设置margin更方便，且不会影响边缘子元素的边距计算。 - 给子元素设置
min-width可以避免在屏幕尺寸过小时子元素被过度压缩，保证内容可读性。 - 如果需要兼容旧版本浏览器，可能需要添加flex相关的浏览器前缀，比如
-webkit-flex。