H5+CSS3响应式设计实战：基于Flex布局的适配方案

在移动互联网主导的时代，网页需要适配从手机、平板到桌面端的多种设备屏幕。H5+CSS3带来的响应式设计技术，成为解决多设备适配的核心方案，而Flex布局作为CSS3的核心弹性布局模块，以其简洁的语法和强大的适配能力，成为响应式开发中的首选布局方案。本文将从响应式设计基础出发，深入解析Flex布局的核心用法，并通过实战案例展示如何结合H5与CSS3实现灵活的响应式网页。

一、响应式设计核心概念与基础要求

响应式设计（Responsive Web Design）的核心目标是让网页在不同尺寸的设备上都能呈现最佳的视觉效果和交互体验，其实现依赖三大核心要素：流体布局 （让元素尺寸随屏幕变化）、媒体查询 （根据屏幕特性加载不同样式）、弹性元素（元素能自适应容器大小）。

在H5+CSS3环境中，实现响应式设计的基础准备的是设置视口（viewport），通过H5的meta标签指定视口属性，确保浏览器正确解析屏幕尺寸。

1.1 基础配置：视口设置

在HTML头部添加以下meta标签，是实现响应式设计的第一步，它能让网页宽度自适应设备屏幕宽度，同时设置初始缩放比例为1.0：

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>
</head>
<body></body>
</html>

说明：width=device-width 表示视口宽度等于设备实际宽度；initial-scale=1.0 表示初始缩放比例为1，禁止浏览器默认缩放。

二、Flex布局：响应式适配的核心工具

Flex布局（弹性布局）是CSS3引入的一种一维布局模型，通过定义容器的弹性特性，让子元素（项目）能够自动分配容器空间、调整排列方式，无需复杂的浮动或定位，就能轻松实现响应式适配。Flex布局的核心是"容器-项目"的关系：给父元素设置 display: flex 后，父元素成为Flex容器，其直接子元素成为Flex项目。

2.1 Flex容器核心属性

Flex容器的属性用于控制项目的排列方向、对齐方式、换行规则等，以下是响应式开发中最常用的属性：

1. flex-direction：控制项目排列方向

定义主轴方向，决定项目是水平排列还是垂直排列，响应式中常用来在移动端和桌面端切换布局方向。所有可选值及含义如下：

css 复制代码

.flex-container {
    display: flex;
    /* 可选值完整列表：
       1. row(默认)：主轴为水平方向，项目从左到右排列；
       2. row-reverse：主轴为水平方向，项目从右到左排列；
       3. column：主轴为垂直方向，项目从上到下排列；
       4. column-reverse：主轴为垂直方向，项目从下到上排列；
    */
    flex-direction: row; 
}

2. justify-content：主轴对齐方式

控制项目在主轴方向上的对齐方式，需结合主轴方向（flex-direction）使用，所有可选值及含义如下：

css 复制代码

.flex-container {
    display: flex;
    /* 可选值完整列表（以主轴为水平方向为例）：
       1. flex-start(默认)：项目靠主轴起点（左侧）对齐；
       2. flex-end：项目靠主轴终点（右侧）对齐；
       3. center：项目在主轴方向居中对齐；
       4. space-between：项目两端对齐，相邻项目间距相等，首尾项目贴容器边缘；
       5. space-around：每个项目两侧间距相等，相邻项目间距为两倍单个间距；
       6. space-evenly：所有项目之间及项目与容器边缘间距均相等；
       7. stretch：仅当项目无固定主轴尺寸时，项目拉伸填满主轴宽度；
    */
    justify-content: space-between;
}

3. align-items：交叉轴对齐方式

控制项目在交叉轴（与主轴垂直）方向上的对齐方式，需结合主轴方向使用，所有可选值及含义如下：

css 复制代码

.flex-container {
    display: flex;
    /* 可选值完整列表（以主轴为水平方向，交叉轴为垂直方向为例）：
       1. stretch(默认)：项目无固定交叉轴尺寸时，拉伸填满容器交叉轴高度；
       2. flex-start：项目靠交叉轴起点（顶部）对齐；
       3. flex-end：项目靠交叉轴终点（底部）对齐；
       4. center：项目在交叉轴方向居中对齐；
       5. baseline：项目按文字基线对齐（若项目文字字号不同，对齐基准为文字底部基线）；
    */
    align-items: center;
}

4. flex-wrap：控制项目是否换行

当项目总尺寸超过容器尺寸时，控制项目是否自动换行，所有可选值及含义如下：

css 复制代码

.flex-container {
    display: flex;
    /* 可选值完整列表：
       1. nowrap(默认)：不换行，项目会被压缩以适应容器尺寸；
       2. wrap：自动换行，换行方向为从上到下（主轴水平时）、从左到右（主轴垂直时）；
       3. wrap-reverse：自动换行，换行方向与wrap相反（从上到下→从下到上，从左到右→从右到左）；
    */
    flex-wrap: wrap;
}

5. flex-flow：复合属性

整合 flex-direction 和 flex-wrap，简化代码书写，格式为：flex-flow: 方向换行规则。

css 复制代码

.flex-container {
    display: flex;
    /* 复合属性，格式：flex-direction值 + 空格 + flex-wrap值，可选值为两者可选值的任意组合 */
    flex-flow: row wrap; /* 水平排列 + 自动换行 */
    /* 其他合法示例：flex-flow: column nowrap; flex-flow: row-reverse wrap; */
}

2.2 Flex项目核心属性

Flex项目的属性用于控制单个项目的尺寸、排序、对齐方式等，除了核心的flex复合属性，还有多个常用属性可辅助实现精细化响应式适配，以下是完整说明：

Flex项目的属性用于控制单个项目的尺寸、排序等，响应式中常用 flex 属性控制项目的弹性缩放。

1. flex：复合属性（核心）

整合 flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础尺寸）三个属性，是控制项目弹性的核心，默认值为 0 1 auto。在响应式中，常用 flex: 1 让项目平均分配容器剩余空间，也可根据需求自定义三个值的组合。

css 复制代码

.flex-item {
    flex: 1; /* 等价于：flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 项目自动放大填满剩余空间，可缩小 */
    /* 其他常用写法 */
    flex: 0 0 200px; /* 不放大、不缩小，基础宽度固定为200px（响应式中可结合媒体查询动态调整） */
    flex: auto; /* 等价于：flex-grow: 1; flex-shrink: 1; flex-basis: auto; 以项目自身尺寸为基础，可放大缩小 */
}

2. flex-grow：项目放大比例

定义项目在容器有剩余空间时的放大比例，默认值为 0（即即使容器有剩余空间，项目也不放大）。仅当容器存在剩余空间时，该属性才会生效，多个项目的放大比例按数值比例分配剩余空间。

css 复制代码

.flex-container {
    display: flex;
    width: 500px; /* 容器固定宽度 */
}
.flex-item1 {
    width: 100px;
    flex-grow: 1; /* 放大比例1 */
}
.flex-item2 {
    width: 100px;
    flex-grow: 2; /* 放大比例2 */
}
/* 说明：容器剩余空间 = 500 - (100+100) = 300px；item1分配100px，item2分配200px，最终宽度分别为200px、300px */

3. flex-shrink：项目缩小比例

定义项目在容器空间不足时的缩小比例，默认值为 1（即容器空间不足时，项目会缩小）。若设置为 0，则项目在容器空间不足时也不缩小，可用于固定某些关键元素的尺寸。

css 复制代码

.flex-container {
    display: flex;
    width: 300px; /* 容器固定宽度 */
}
.flex-item1 {
    width: 200px;
    flex-shrink: 1; /* 可缩小（默认） */
}
.flex-item2 {
    width: 200px;
    flex-shrink: 0; /* 不可缩小 */
}
/* 说明：项目总宽度400px > 容器300px，空间不足100px；item2不缩小，item1缩小100px，最终宽度分别为100px、200px */

4. flex-basis：项目基础尺寸

定义项目在分配容器空间之前的基础尺寸，默认值为auto（即项目的基础尺寸由自身内容或宽度/高度属性决定）。可设置为具体数值（如 200px）或百分比，优先级高于项目自身的 width/height 属性（主轴为水平方向时优先级高于width，垂直方向时高于height）。

css 复制代码

.flex-item {
    width: 150px;
    flex-basis: 200px; /* 基础宽度200px，覆盖width属性 */
}

5. align-self：单个项目交叉轴对齐方式

用于单独设置某个项目在交叉轴上的对齐方式，可覆盖容器的 align-items 属性，可选值与 align-items 完全一致，默认值为 auto（即继承容器的align-items属性）。所有可选值及含义如下：

css 复制代码

.flex-container {
    display: flex;
    align-items: flex-start; /* 容器内项目默认靠交叉轴起点对齐 */
    height: 300px; /* 容器固定高度，方便观察垂直对齐效果 */
}
.flex-item {
    width: 100px;
}
.flex-item-special {
    /* 可选值：auto(默认)、stretch、flex-start、flex-end、center、baseline（含义与align-items一致） */
    align-self: center; /* 单个项目居中对齐，覆盖容器的flex-start */
}

6. order：项目排序顺序

定义项目在容器中的排列顺序，通过数值大小控制优先级，所有可选值及规则如下：

css 复制代码

.flex-item1 {
    order: 2; /* 排序靠后 */
}
.flex-item2 {
    order: 1; /* 排序靠前 */
}
.flex-item3 {
    order: -1; /* 负数，排序最靠前 */
}
/* 可选值规则：
   1. 所有整数（正整数、负整数、0）均可作为值；
   2. 数值越小，项目排列越靠前；
   3. 多个项目order值相同时，按HTML结构默认顺序排列；
*/

为了方便快速查阅和对比，以下是Flex布局核心属性及属性值汇总表格：

属性类型	属性名称	可选值	含义/说明
Flex容器属性	flex-direction	row(默认)、row-reverse、column、column-reverse	定义主轴方向，控制项目排列方向（水平/垂直，正序/倒序）
	justify-content	flex-start(默认)、flex-end、center、space-between、space-around、space-evenly、stretch	控制项目在主轴方向的对齐方式（需结合主轴方向）
	align-items	stretch(默认)、flex-start、flex-end、center、baseline	控制项目在交叉轴方向的对齐方式（需结合主轴方向）
	flex-wrap	nowrap(默认)、wrap、wrap-reverse	控制项目总尺寸超容器时是否换行及换行方向
	flex-flow	flex-direction值 + 空格 + flex-wrap值的任意组合	复合属性，简化flex-direction和flex-wrap的书写
Flex项目属性	flex	默认值0 1 auto；常用值：1、auto、0 0 固定尺寸（如200px）	复合属性，整合flex-grow、flex-shrink、flex-basis，控制项目弹性
	flex-grow	默认值0；任意非负整数	容器有剩余空间时，项目的放大比例（0为不放大）
	flex-shrink	默认值1；任意非负整数	容器空间不足时，项目的缩小比例（0为不缩小）
	flex-basis	默认值auto；具体数值（如200px）、百分比	项目分配空间前的基础尺寸，优先级高于自身width/height
	align-self	默认值auto；stretch、flex-start、flex-end、center、baseline	单独设置单个项目的交叉轴对齐方式，覆盖容器align-items
	order	默认值0；任意整数（正/负/0）	控制项目排列顺序，数值越小越靠前，相同值按HTML顺序

三、H5+CSS3响应式设计实战：Flex布局案例

下面通过一个"响应式卡片布局"案例，综合运用视口设置、Flex布局、媒体查询，实现从移动端到桌面端的自适应效果。需求如下：

移动端（屏幕宽度 < 768px）：1列卡片，垂直排列
平板端（768px ≤ 屏幕宽度 < 1200px）：2列卡片，水平排列
桌面端（屏幕宽度 ≥ 1200px）：4列卡片，水平排列

3.1 完整代码实现

html 复制代码

<!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 {
            padding: 20px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        /* Flex容器：卡片容器 */
        .card-container {
            display: flex;
            flex-flow: row wrap; /* 水平排列 + 自动换行 */
            gap: 20px; /* 项目之间的间距（替代margin，更简洁） */
        }
        
        /* Flex项目：卡片 */
        .card {
            flex: 1 1 100%; /* 基础宽度100%，自动缩放 */
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .card h3 {
            margin-bottom: 15px;
            color: #333;
        }
        
        .card p {
            color: #666;
            line-height: 1.5;
        }
        
        /* 媒体查询：平板端（768px及以上） */
        @media (min-width: 768px) {
            .card {
                flex: 1 1 calc(50% - 20px); /* 2列布局，减去gap间距 */
            }
        }
        
        /* 媒体查询：桌面端（1200px及以上） */
        @media (min-width: 1200px) {
            .card {
                flex: 1 1 calc(25% - 20px); /* 4列布局，减去gap间距 */
            }
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">
            <h3>响应式设计基础</h3>
            <p>基于H5+CSS3实现多设备适配，核心是视口设置、流体布局和媒体查询，配合Flex布局可快速实现灵活适配。</p>
        </div>
        <div class="card">
            <h3>Flex布局优势</h3>
            <p>一维布局模型，支持方向切换、自动换行、弹性缩放，无需浮动和定位，简化响应式布局代码。</p>
        </div>
        <div class="card">
            <h3>媒体查询用法</h3>
            <p>根据屏幕尺寸加载不同样式，常用断点：320px（移动端）、768px（平板）、1200px（桌面端）。</p>
        </div>
        <div class="card">
            <h3>实战技巧</h3>
            <p>使用gap属性控制项目间距，flex复合属性快速实现弹性缩放，优先移动端布局，再通过媒体查询适配大屏。</p>
        </div>
    </div>
</body>
</html>

3.2 代码解析

基础样式重置：通过 box-sizing: border-box 让padding不影响元素总宽度，避免布局错乱。
Flex容器配置：card-container 设为 flex-flow: row wrap，实现水平排列且自动换行，gap: 20px 控制卡片间距，比传统margin更简洁。
Flex项目配置：默认 flex: 1 1 100%，卡片基础宽度100%，实现移动端1列布局；通过媒体查询，在平板端将基础宽度调整为 calc(50% - 20px)（减去gap间距），实现2列布局；桌面端调整为 calc(25% - 20px)，实现4列布局。
响应式断点设计：采用"移动优先"原则，先实现移动端布局，再通过 min-width 媒体查询适配更大屏幕，符合现代响应式开发规范。

四、响应式设计进阶技巧

结合CSS变量：定义全局变量存储断点、间距、颜色等，简化样式维护。例如：
:root { --gap: 20px; --mobile-break: 768px; --desktop-break: 1200px; } .card-container { gap: var(--gap); } @media (min-width: var(--mobile-break)) { ... }
Flex与Grid结合：Flex适合一维布局（行或列），Grid适合二维布局，复杂响应式场景可搭配使用，例如用Grid实现整体页面框架，Flex实现局部元素对齐。
避免固定尺寸：尽量使用相对单位（%、rem、em、vw/vh）替代px，增强布局弹性。例如用 font-size: 1rem 让字体大小随根元素自适应。

4.2 Flex与rem/vw/vh的结合适配案例

Flex布局的弹性特性与相对单位（rem、vw/vh）结合，可进一步提升响应式适配的精细度------rem基于根元素字体大小实现全局缩放，vw/vh基于视口尺寸实现自适应，两者与Flex的弹性分配空间特性互补，适配更灵活。以下是两个实战案例：

案例1：Flex + rem 实现全局自适应布局

核心逻辑：通过媒体查询动态调整根元素（html）的font-size，使rem单位随屏幕尺寸缩放；Flex布局控制元素排列和空间分配，实现全局自适应。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex + rem 适配案例</title>
    <style>
        /* 1. 动态设置rem基准值：基于屏幕宽度缩放 */
        html {
            /* 基准：1rem = 10px（10/16=62.5%，默认字体16px） */
            font-size: 62.5%; 
        }
        /* 平板端：调整rem基准 */
        @media (min-width: 768px) {
            html {
                font-size: 75%; /* 1rem = 12px */
            }
        }
        /* 桌面端：调整rem基准 */
        @media (min-width: 1200px) {
            html {
                font-size: 87.5%; /* 1rem = 14px */
            }
        }

        /* 2. Flex布局配合rem单位 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem; /* 15px 20px（基于基准font-size） */
            background-color: #333;
            color: #fff;
        }
        .logo {
            font-size: 2rem; /* 20px/24px/28px 随屏幕缩放 */
        }
        .nav {
            display: flex;
            gap: 2rem; /* 20px/24px/28px 随屏幕缩放 */
        }
        .nav a {
            color: #fff;
            text-decoration: none;
            font-size: 1.4rem; /* 14px/16.8px/19.6px 随屏幕缩放 */
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">Flex+Rem适配</div>
        <div class="nav">
            <a href="#">首页</a>
            <a href="#">案例</a>
            <a href="#">关于</a>
        </div>
    </div>
</body>
</html>

说明：通过媒体查询动态调整html的font-size，使rem单位在不同屏幕尺寸下对应不同像素值，实现全局元素（padding、font-size、gap等）自适应；Flex布局负责header内部元素的对齐和排列，两者结合既保证了布局结构稳定，又实现了尺寸的灵活缩放。

案例2：Flex + vw/vh 实现视口级自适应布局

核心逻辑：vw（视口宽度的1%）、vh（视口高度的1%）直接基于视口尺寸计算，无需动态调整基准值；Flex布局控制元素的弹性排列，两者结合可快速实现"随视口实时缩放"的布局效果，适合全屏或半屏场景。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex + vw/vh 适配案例</title>
    <style>
        /* 1. vw/vh单位直接适配视口 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh; /*  body高度=视口高度 */
            display: flex;
            flex-direction: column;
        }
        /* 2. Flex布局配合vw/vh */
        .banner {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 30vh; /*  banner高度=视口高度的30% */
            background-color: #4299e1;
            color: #fff;
        }
        .banner h2 {
            font-size: 5vw; /*  字体大小=视口宽度的5% */
        }
        .content {
            display: flex;
            flex: 1; /*  占满剩余高度（100vh - 30vh） */
            gap: 2vw; /*  间距=视口宽度的2% */
            padding: 2vw;
            background-color: #f5f5f5;
        }
        .content-item {
            flex: 1; /*  平均分配剩余空间 */
            padding: 2vw;
            background-color: #fff;
            border-radius: 1vw; /*  圆角=视口宽度的1% */
        }
        .content-item h3 {
            font-size: 2.5vw;
            margin-bottom: 1vw;
        }
        .content-item p {
            font-size: 1.5vw;
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <div class="banner">
        <h2>Flex + vw/vh 视口适配</h2>
    </div>
    <div class="content">
        <div class="content-item">
            <h3>视口级缩放</h3>
            <p>基于vw/vh单位，元素尺寸随视口实时缩放，无需媒体查询调整基准值。</p>
        </div>
        <div class="content-item">
            <h3>Flex弹性分配</h3>
            <p>Flex布局控制元素排列和空间分配，与vw/vh结合实现结构与尺寸双重自适应。</p>
        </div>
    </div>
</body>
</html>

说明：banner高度用30vh直接关联视口高度，字体大小用5vw关联视口宽度，实现随视口实时缩放；content区域通过flex:1占满剩余视口高度，内部项目用flex:1平均分配宽度，gap和padding用vw单位，确保间距和内边距也随视口缩放。该方案无需复杂的媒体查询，适合对实时适配要求高的场景。

总结：rem适合需要"分档缩放"的全局布局（如不同设备有固定设计规范），vw/vh适合需要"实时视口缩放"的场景；两者与Flex布局结合，可覆盖绝大多数响应式适配需求，兼顾灵活性和稳定性。

4.1 Flex布局常见问题及解决方案

在Flex布局实际开发中，常会遇到兼容性、布局错乱、属性优先级混淆等问题，以下是高频问题及针对性解决方案：

1. 问题：旧浏览器（如IE10及以下）不支持Flex布局

原因：Flex布局是CSS3特性，IE10仅部分支持（需加前缀），IE9及以下完全不支持。

解决方案：① 针对低版本IE，可提供降级方案（如浮动布局）；② 若需兼容IE10，为Flex相关属性添加-ms-前缀。

css 复制代码

/* 兼容IE10的Flex容器配置 */
.flex-container {
    display: -ms-flexbox; /* IE10前缀 */
    display: flex;
    -ms-flex-direction: row; /* IE10前缀 */
    flex-direction: row;
    -ms-flex-wrap: wrap; /* IE10前缀 */
    flex-wrap: wrap;
}
/* 兼容IE10的Flex项目配置 */
.flex-item {
    -ms-flex: 1 1 100%; /* IE10前缀 */
    flex: 1 1 100%;
}
/* 降级方案：IE9及以下使用浮动 */
@media screen and (max-width: 767px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flex-container {
        /* 清除浮动父容器塌陷 */
        overflow: hidden;
        zoom: 1;
    }
    .flex-item {
        float: left;
        width: 100%;
    }
}

2. 问题：Flex项目未按预期换行，出现溢出容器

原因：默认 flex-wrap: nowrap（不换行），若项目总尺寸超过容器，会压缩项目；若项目设置了固定尺寸且 flex-shrink: 0，则会溢出。

解决方案：主动设置 flex-wrap: wrap 允许换行；若项目有固定尺寸，需计算好尺寸与间距，避免总尺寸超出容器。

css 复制代码

.flex-container {
    display: flex;
    flex-wrap: wrap; /* 关键：允许换行 */
    gap: 20px;
    padding: 10px;
}
.flex-item {
    flex: 0 0 200px; /* 固定宽度200px，不缩放 */
    /* 避免溢出：通过calc计算最大宽度，适配容器 */
    max-width: calc(100% - 20px);
}

3. 问题：`flex-basis` 与 `width` 优先级混淆，尺寸不符合预期

原因：主轴为水平方向时，flex-basis 优先级高于 width；若未设置 flex-basis 且为 auto，则以 width 为准。

解决方案：明确主轴方向，根据需求选择设置 flex-basis 或 width，避免重复设置导致冲突。

css 复制代码

/* 主轴水平，优先flex-basis控制尺寸 */
.flex-item {
    flex-basis: 200px; /* 优先级高于width */
    width: 150px; /* 无效，被flex-basis覆盖 */
}
/* 若需以width为准，设置flex-basis: auto */
.flex-item {
    flex-basis: auto;
    width: 150px; /* 生效 */
}

4. 问题：`justify-content: center` 垂直居中无效

原因：justify-content 控制主轴对齐，align-items 控制交叉轴对齐；若想垂直居中，需确保主轴为垂直方向（flex-direction: column），或用 align-items 控制垂直方向（主轴水平时）。

解决方案：明确对齐方向与主轴的对应关系，垂直居中需针对性设置：

css 复制代码

/* 场景1：主轴水平（默认），垂直居中（交叉轴） */
.flex-container {
    display: flex;
    height: 300px; /* 需给容器设置高度，否则交叉轴无固定尺寸 */
    align-items: center; /* 垂直居中核心属性 */
}
/* 场景2：主轴垂直，垂直居中（主轴） */
.flex-container {
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: center; /* 垂直居中核心属性 */
}

5. 问题：`gap` 属性在旧浏览器不生效

原因：gap 是CSS3新增属性，部分旧浏览器（如IE全版本、Safari 10及以下）不支持。

解决方案：用项目的 margin 替代 gap，通过容器的 padding 抵消边缘项目的margin，实现等效间距。

css 复制代码

.flex-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px; /* 抵消左右边缘项目的margin */
}
.flex-item {
    flex: 1 1 100%;
    margin: 10px; /* 替代gap，上下左右间距10px */
}
/* 平板端适配 */
@media (min-width: 768px) {
    .flex-item {
        flex: 1 1 calc(50% - 20px); /* 减去左右margin总和20px */
    }
}

五、总结

H5+CSS3响应式设计的核心是"一次开发，多端适配"，而Flex布局以其简洁的语法、强大的弹性适配能力，成为响应式开发的核心工具。通过本文的学习，我们掌握了视口设置、Flex容器与项目属性、媒体查询的核心用法，并通过实战案例实现了多端适配的卡片布局。在实际开发中，需坚持"移动优先"原则，合理设计断点，结合CSS变量、相对单位等技巧，才能打造出体验优良的响应式网页。

H5+CSS3响应式设计实战：基于Flex布局的适配方案

一、响应式设计核心概念与基础要求

1.1 基础配置：视口设置

二、Flex布局：响应式适配的核心工具

2.1 Flex容器核心属性

1. flex-direction：控制项目排列方向

2. justify-content：主轴对齐方式

3. align-items：交叉轴对齐方式

4. flex-wrap：控制项目是否换行

5. flex-flow：复合属性

2.2 Flex项目核心属性

1. flex：复合属性（核心）

2. flex-grow：项目放大比例

3. flex-shrink：项目缩小比例

4. flex-basis：项目基础尺寸

5. align-self：单个项目交叉轴对齐方式

6. order：项目排序顺序

三、H5+CSS3响应式设计实战：Flex布局案例

3.1 完整代码实现

3.2 代码解析

四、响应式设计进阶技巧

4.2 Flex与rem/vw/vh的结合适配案例

案例1：Flex + rem 实现全局自适应布局

案例2：Flex + vw/vh 实现视口级自适应布局

4.1 Flex布局常见问题及解决方案

1. 问题：旧浏览器（如IE10及以下）不支持Flex布局

2. 问题：Flex项目未按预期换行，出现溢出容器

3. 问题：flex-basis 与 width 优先级混淆，尺寸不符合预期

4. 问题：justify-content: center 垂直居中无效

5. 问题：gap 属性在旧浏览器不生效

五、总结

3. 问题：`flex-basis` 与 `width` 优先级混淆，尺寸不符合预期

4. 问题：`justify-content: center` 垂直居中无效

5. 问题：`gap` 属性在旧浏览器不生效