CSS 布局实战｜Flex+Grid 实现 3 种常用页面布局（新手友好，附调试技巧）

代码煮茶
13 阅读11分钟

一、效果预览（3 种布局截图说明）

  1. 移动端单列布局（头部导航 → 主体内容 → 底部版权，适配手机竖屏，内容自适应屏幕宽度，无横向滚动）
  2. PC 端两栏侧边栏布局（左侧固定宽度侧边导航 + 右侧自适应宽度主体内容，滚动时左侧侧边栏固定不跟随）
  3. PC 端卡片网格布局（商品列表 / 文章列表专用，自动换行，不同屏幕下调整卡片数量，响应式适配平板 / 电脑）

二、前置准备

  1. 工具要求：无需额外环境，仅需 VS Code（可搭配之前提到的 CSS 高亮、格式化插件，如 Prettier、CSS Peek）
  2. 知识点储备：了解 HTML 基本标签（div、header、main、footer、section）、CSS 基本选择器（类选择器、后代选择器）、盒模型（width、height、margin、padding），零基础也可跟随操作，代码均附带详细注释
  3. 提前说明：本次实战不使用框架，纯原生 CSS 实现，重点区分 Flex 与 Grid 的适用场景，最终代码可直接复制用于项目原型开发

三、核心知识点梳理（新手必看）

在开始布局实战前，先明确两个核心布局模块的作用，避免后续混淆：

  1. Flex 弹性布局：

    • 一维布局（只能沿水平或垂直单个方向排列元素）
    • 适用场景：导航栏、列表、居中对齐、侧边栏 + 主体等简单布局
    • 核心属性：display: flex（开启弹性布局）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex: 1（子元素自适应剩余空间）

  2. Grid 网格布局：

    • 二维布局（同时控制水平和垂直方向，可实现多行多列网格）
    • 适用场景：卡片列表、表单布局、整个页面的大框架划分
    • 核心属性：display: grid（开启网格布局）、grid-template-columns（定义列数与列宽）、grid-gap（网格间距）、grid-auto-rows（自动定义行高）

  3. 响应式核心：@media 媒体查询，通过判断屏幕宽度，切换不同的布局样式，实现 “一套代码，适配多端”

四、分步实现（3 种布局逐一拆解，附代码块）

步骤 1：实现 移动端单列布局（基础入门，Flex 实现）

这种布局是移动端页面的基础，结构简单，重点掌握元素的垂直排列与自适应。

  1. HTML 结构搭建（语义化标签，便于后续维护）

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 关键：设置视口，开启移动端适配，避免页面缩放异常 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端单列布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">移动端单列布局 - 头部导航</header>
    <!-- 主体内容 -->
    <main class="main">
        主体内容区域（自适应屏幕高度，超出部分可滚动）<br>
        测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
        测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
    </main>
    <!-- 底部 -->
    <footer class="footer">底部版权信息 - 2026 前端实战</footer>
</body>
</html>
  1. CSS 样式实现（Flex 垂直排列）

css

/* 初始化样式：清除默认边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 让 body 占满整个屏幕高度，开启 Flex 垂直布局 */
body {
    height: 100vh; /* 100vh = 视口高度的100% */
    display: flex;
    flex-direction: column; /* 改为垂直方向排列（默认是水平） */
}

/* 头部：固定高度，背景色，居中对齐 */
.header {
    height: 50px;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    line-height: 50px; /* 行高等于高度，实现文字垂直居中 */
}

/* 主体：自适应剩余高度（核心），溢出滚动 */
.main {
    flex: 1; /* 占据 body 剩余的所有高度，关键属性 */
    background-color: #f5f5f5;
    padding: 20px;
    overflow-y: auto; /* 内容超出时，垂直方向显示滚动条，避免页面塌陷 */
}

/* 底部：固定高度，背景色，居中对齐 */
.footer {
    height: 40px;
    background-color: #2c3e50;
    color: white;
    text-align: center;
    line-height: 40px;
}
  1. 效果验证：打开浏览器，将窗口缩小至手机尺寸（约 375px-414px），页面应完整占满屏幕，头部和底部固定，主体内容超出时可滚动，无横向滚动条。

步骤 2：实现 PC 端两栏侧边栏布局（Flex 进阶，固定 + 自适应）

这种布局常用于后台管理系统、博客网站，重点掌握 “左侧固定，右侧自适应” 的实现方式，同时添加滚动固定效果。

  1. HTML 结构搭建

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC 端两栏布局</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div class="container">
        <!-- 左侧侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-title">侧边导航</div>
            <ul class="nav-list">
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
                <li>菜单4</li>
            </ul>
        </aside>
        <!-- 右侧主体内容 -->
        <main class="content">
            <h1>主体内容区域</h1>
            <p>右侧自适应宽度，左侧固定 200px</p>
            <!-- 大量测试内容，用于验证滚动效果 -->
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
            <div class="test-content">测试内容</div>
        </main>
    </div>
</body>
</html>
  1. CSS 样式实现

css

/* 初始化样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 容器：开启 Flex 水平布局，占满整个屏幕高度 */
.container {
    display: flex;
    height: 100vh;
}

/* 左侧侧边栏：固定宽度 200px，背景色，固定不跟随滚动 */
.sidebar {
    width: 200px; /* 固定宽度，关键 */
    background-color: #2c3e50;
    color: white;
    position: sticky; /* 粘性定位，实现滚动固定 */
    top: 0; /* 距离顶部 0，滚动时保持在页面顶部 */
    height: 100vh; /* 占满屏幕高度 */
    padding: 20px 0;
}

.sidebar-title {
    text-align: center;
    font-size: 18px;
    margin-bottom: 30px;
}

.nav-list {
    list-style: none; /* 清除列表默认圆点 */
}

.nav-list li {
    padding: 15px 20px;
    cursor: pointer; /* 鼠标悬浮显示手型 */
}

.nav-list li:hover {
    background-color: #34495e; /* 悬浮高亮效果 */
}

/* 右侧主体内容：自适应剩余宽度，核心属性 flex: 1 */
.content {
    flex: 1; /* 占据容器剩余所有宽度，关键 */
    background-color: #f5f5f5;
    padding: 30px;
}

.test-content {
    height: 100px;
    background-color: white;
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微阴影，提升视觉效果 */
}
  1. 效果验证：将浏览器窗口放大至 PC 尺寸（大于 1200px），左侧侧边栏固定 200px 宽度且滚动时不跟随，右侧主体内容自适应填充剩余屏幕宽度，鼠标悬浮在侧边菜单上有高亮效果。

步骤 3：实现 PC 端卡片网格布局（Grid 实现，响应式换行）

这种布局常用于商品列表、文章卡片、相册展示，重点掌握 Grid 的多行多列配置和响应式自适应，实现不同屏幕下卡片数量自动调整。

  1. HTML 结构搭建

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC 端卡片网格布局</title>
    <link rel="stylesheet" href="style3.css">
</head>
<body>
    <div class="card-container">
        <h2 class="container-title">文章卡片列表（Grid 响应式）</h2>
        <!-- 卡片列表 -->
        <div class="card-grid">
            <div class="card">
                <img src="https://picsum.photos/300/200" alt="文章封面">
                <div class="card-content">
                    <h3>文章标题1</h3>
                    <p>这是一篇前端实战文章，讲解 CSS Grid 布局的使用技巧</p>
                </div>
            </div>
            <div class="card">
                <img src="https://picsum.photos/300/201" alt="文章封面">
                <div class="card-content">
                    <h3>文章标题2</h3>
                    <p>这是一篇前端实战文章，讲解 CSS Grid 布局的使用技巧</p>
                </div>
            </div>
            <div class="card">
                <img src="https://picsum.photos/300/202" alt="文章封面">
                <div class="card-content">
                    <h3>文章标题3</h3>
                    <p>这是一篇前端实战文章，讲解 CSS Grid 布局的使用技巧</p>
                </div>
            </div>
            <div class="card">
                <img src="https://picsum.photos/300/203" alt="文章封面">
                <div class="card-content">
                    <h3>文章标题4</h3>
                    <p>这是一篇前端实战文章，讲解 CSS Grid 布局的使用技巧</p>
                </div>
            </div>
            <div class="card">
                <img src="https://picsum.photos/300/204" alt="文章封面">
                <div class="card-content">
                    <h3>文章标题5</h3>
                    <p>这是一篇前端实战文章，讲解 CSS Grid 布局的使用技巧</p>
                </div>
            </div>
            <div class="card">
                <img src="https://picsum.photos/300/205" alt="文章封面">
                <div class="card-content">
                    <h3>文章标题6</h3>
                    <p>这是一篇前端实战文章，讲解 CSS Grid 布局的使用技巧</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
  1. CSS 样式实现（Grid + 媒体查询响应式）

css

/* 初始化样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 容器整体样式 */
.card-container {
    width: 90%;
    margin: 0 auto; /* 水平居中 */
    padding: 30px 0;
}

.container-title {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
}

/* 卡片网格：开启 Grid 布局，核心配置 */
.card-grid {
    display: grid;
    /* 定义列：每列最小 300px，最大 1fr，自动填充（响应式核心） */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px; /* 网格间距（列+行），替代旧版 grid-column-gap/grid-row-gap */
}

/* 卡片样式优化 */
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* 隐藏超出卡片的内容，避免图片圆角失效 */
    transition: transform 0.3s ease; /* 过渡动画，提升交互体验 */
}

/* 卡片悬浮效果 */
.card:hover {
    transform: translateY(-5px); /* 向上偏移 5px，产生悬浮感 */
}

.card img {
    width: 100%; /* 图片宽度填满卡片 */
    height: 200px; /* 固定图片高度 */
    object-fit: cover; /* 图片裁剪，保持比例，不拉伸 */
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.card-content p {
    color: #7f8c8d;
    font-size: 14px;
    line-height: 1.6;
}

/* 媒体查询：响应式适配不同屏幕 */
/* 平板尺寸（768px - 1200px）：保持样式不变，Grid 自动换行 */
/* 手机尺寸（小于 768px）：调整网格间距，优化卡片内边距 */
@media (max-width: 768px) {
    .card-grid {
        grid-gap: 15px;
    }

    .card-content {
        padding: 15px;
    }
}

  1. 效果验证：

    • PC 大屏（大于 1200px）：卡片自动排列为 3-4 列，每列宽度自适应，间距均匀
    • 平板尺寸（768px-1200px）：卡片自动换行，变为 2 列，保持美观
    • 手机尺寸（小于 768px）：卡片自动变为 1 列，填充屏幕宽度，间距和内边距优化，无横向滚动

五、样式优化技巧（提升页面质感，新手也能上手）

  1. 统一盒模型：使用 box-sizing: border-box;，让元素的 padding 和 border 不影响宽高计算，避免布局混乱，建议全局初始化时添加。
  2. 添加阴影和圆角：给卡片、按钮等元素添加 border-radius 和 box-shadow，提升页面层次感，避免生硬的直角。
  3. 过渡动画：给悬浮效果添加 transition 过渡属性，让动画更平滑，避免突兀的样式变化。
  4. 文字排版优化：统一文字颜色、行高（line-height），避免文字过于拥挤或松散，提升可读性。
  5. 水平居中技巧：块级元素可使用 margin: 0 auto;，行内元素可使用 text-align: center;，Flex/Grid 布局可使用自带的对齐属性。

六、避坑点总结（新手常踩的坑，附解决方案）

  1. 坑 1：Flex 布局子元素无法自适应剩余空间

    • 问题表现：右侧主体内容无法填充剩余屏幕宽度，而是跟随内容宽度变化
    • 解决方案：给子元素添加 flex: 1;，同时确保父元素已开启 display: flex;，且子元素没有设置固定宽度（需要自适应的元素）

  2. 坑 2：Grid 布局图片拉伸 / 变形

    • 问题表现：卡片中的图片尺寸不一致，导致卡片高度混乱，图片拉伸变形
    • 解决方案：给图片设置固定高度，添加 object-fit: cover;，让图片保持比例裁剪填充，同时给卡片添加 overflow: hidden;

  3. 坑 3：移动端出现横向滚动条

    • 问题表现：手机尺寸下，页面出现横向滚动，需要左右滑动才能看到完整内容

    • 解决方案：

      • 必须添加视口标签 <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • 元素宽度尽量使用百分比、flex: 1 或 minmax()，避免设置固定宽度（如 1000px）
      • 全局添加 overflow-x: hidden;，隐藏横向滚动条

  4. 坑 4：粘性定位（sticky）不生效

    • 问题表现：侧边栏添加 position: sticky; 后，滚动时仍跟随页面移动，无法固定

    • 解决方案：

      • 必须设置 top/bottom/left/right 其中一个属性（如 top: 0;）
      • 父元素不能有 overflow: hidden; 属性，否则会破坏粘性定位
      • 元素高度不能超过父元素高度

  5. 坑 5：浮动塌陷（布局混乱）

    • 问题表现：使用 float 布局后，父元素高度为 0，子元素溢出父元素

    • 解决方案（推荐新手使用 Flex 替代 float，避免塌陷）：

      • 方案 1：给父元素添加 overflow: hidden;
      • 方案 2：父元素末尾添加清除浮动的伪元素 ::after
      • 方案 3：使用 Flex 布局替代 float，从根源上解决塌陷问题

七、拓展延伸（新手进阶方向）

  1. 布局混合使用：Flex 用于内部元素排列，Grid 用于整个页面的大框架划分，提升布局效率
  2. CSS 变量：使用 --main-color: #2c3e50; 定义全局变量，统一修改页面样式，便于维护
  3. 响应式导航结合：将之前的响应式导航栏与本次的布局结合，实现完整的页面原型
  4. CSS 框架对比：了解 Bootstrap、Tailwind CSS 等框架的布局方式，对比原生 CSS 布局的差异，提升开发效率

总结

  1. 本次实战用 Flex 实现了移动端单列、PC 端两栏布局，用 Grid 实现了卡片网格布局，覆盖了前端开发中 80% 的常用布局场景。
  2. 响应式的核心是 @media 媒体查询 + 弹性 / 网格布局，避免固定宽度，优先使用自适应属性（flex: 1、minmax()）。
  3. 新手避坑重点：解决 Flex 自适应失效、Grid 图片变形、移动端横向滚动、粘性定位不生效这四大问题，同时优先用 Flex 替代 float 避免布局塌陷。
avatar
文章
阅读
粉丝