深入掌握CSS Flex布局：从原理到实战

小宁爱Python2025-05-13 18:41

一、Flex布局革命性突破

1.1 Flex布局诞生背景

2009年W3C提出的Flexible Box Layout模块标志着网页布局进入新时代。传统布局方式面临的三大痛点：

  1. 垂直居中实现困难
  2. 等高列布局复杂度高
  3. 响应式适配维护成本大

1.2 核心优势对比

特性 浮动布局 Flex布局
布局方向 单一水平流向 任意方向自由控制
空间分配 手动计算 自动分配
对齐控制 有限支持 全方位精确控制
响应式适应 依赖媒体查询 内置弹性适应机制

1.3、flex弹性盒子模型布局定义

Flex（弹性盒子）是 CSS3 中的一种布局模式，旨在提供一种更有效的方式来对容器中的子元素进行排列、对齐和分配空间。它特别适用于响应式设计，可以轻松实现动态调整的布局。

二、flex布局的模式设定

属性名 作用对象 常用值及解释 用途
display 容器 flex：将容器设为弹性布局模式 定义弹性容器，使子元素成为弹性项目
css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>47-flex布局-体验</title>
    <style>
        /* flex布局不会脱标 */
        .box{
            display: flex;
            /* height: 300px; */
            border: 1px solid rgb(0, 0, 0);
        }
        .box div{
            width: 200px;
            height: 100px;
            background-color: #26a848;
            border: red 1px solid;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

通过运行结果我们可以发现div标签原本是块级元素，会自动换行，但是由于我们给父容器设置了disply:flex属性，我们的子div盒子并没有换行，而是在一行排列。而且虽然我们没有给我们的父容器设置高度，但是父容器的高度也由子盒子的高度默认撑开了，说明flex布局不会使盒子脱标。

三、flex布局的常用父属性

属性名 作用对象 常用值及解释 用途
display 父容器 flex：将容器设为弹性布局模式 定义弹性容器，使子元素成为弹性项目
flex-direction 父容器 row（默认，主轴水平向右） row-reverse（主轴水平向左） column（主轴垂直向下） column-reverse（主轴垂直向上） 定义主轴方向，决定子元素排列顺序
justify-content 父容器 flex-start（左对齐） flex-end（右对齐） center（居中） space-between（两端对齐，项目间隔相等） space-around（项目两侧间隔相等） space-evenly(项目之间的间隔相等 ) 控制主轴方向上的对齐方式
align-items 父容器 stretch（默认，拉伸填满容器） flex-start（顶部对齐） flex-end（底部对齐） center（垂直居中） baseline（基线对齐） 控制交叉轴方向上的对齐方式
flex-wrap 父容器 nowrap（默认，不换行） wrap（换行，第一行在上方） 控制子元素是否换行
align-content 父容器 stretch（默认，拉伸占满容器） flex-start（顶部对齐） flex-end（底部对齐） center（垂直居中） space-between（行间距平均分布） space-around;（项目两侧间隔相等） space-evenly(项目之间的间隔相等 ) 多行子元素在交叉轴的对齐方式（需配合 flex-wrap: wrap 使用）

3.1 flex-direction：定义主轴方向，决定子元素排列顺序

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>50-flex布局(主轴与侧轴对齐方式)</title>
    <style>
        .container{
            margin: 0 auto;
            border: 1px solid rgb(0, 0, 0);
            width: 1000px;
            height: 1000px;
            display: flex;
            /* 主轴方向为水平方向：顺序排列 */
            /* flex-direction: row; */
            /* 主轴方向为水平方向：逆序排列 */
            /* flex-direction: row-reverse; */
            /* 主轴方向为垂直方向：顺序排列 */
            /* flex-direction: column; */
            /* 主轴方向为垂直方向：逆序排列 */
            flex-direction: column-reverse;
        }
        .container div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

效果展示：

1、flex-direction: row;

2、flex-direction: row-reverse;

3、flex-direction: column;

4、flex-direction: column-reverse;

3.2 justify-content：控制主轴方向上的对齐方式

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex主轴对齐方式</title>
    <style>
        .container{
            margin: 0 auto;
            border: 1px solid rgb(0, 0, 0);
            width: 1000px;
            height: 1000px;
            display: flex;
            /* flex-start（左对齐） */
            /* justify-content: start; */
            /* flex-end（右对齐） */
            /* justify-content: end;    */
            /* center（居中） */
            /* justify-content: center;  */
            /* space-between（两端对齐，项目间隔相等） */
            /* justify-content: space-between; */
            /* space-around（项目两侧间隔相等） */
            /* justify-content: space-around; */
            /* space-evenly（项目之间间隔相等） */
            /* justify-content: space-evenly; */
        }
        .container div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

1、justify-content: start;

2、justify-content: end;

3、justify-content: center;

4、justify-content: space-between;

5、justify-content: space-around;

6、justify-content: space-evenly;

3.3 align-items：控制交叉轴方向上的对齐方式

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交叉轴的对齐方式</title>
    <style>
        .container{
            margin: 0 auto;
            border: 1px solid rgb(0, 0, 0);
            width: 1000px;
            height: 1000px;
            display: flex;
            /* stretch（默认，拉伸填满容器,没设置高度的时候生效） */
            align-items: stretch;
            /* flex-start（顶部对齐） */
            /* align-items: flex-start; */
            /* flex-end（底部对齐） */
            /* align-items: flex-end; */
            /* center（垂直居中） */
            /* align-items: center; */
            /* baseline（基线对齐） */
            /* align-items: baseline; */
        }
        .container div{
            width: 200px;
            /* height: 200px; */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

1、align-items: stretch;

2、 align-items start;

3、align-items: end;

4、align-items: center;

5、align-items: baseline;

3.4 flex-wrap：控制子元素是否换行

1、flex-wrap：换行

3.5 align-content：多行子元素在交叉轴的对齐方式

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行子元素交叉轴对齐方式</title>
    <style>
        .container{
            margin: 0 auto;
            border: 1px solid rgb(0, 0, 0);
            width: 1000px;
            height: 1000px;
            display: flex;
            /* wrap:换行 */
            flex-wrap: wrap;
            justify-content: space-between;
            /* flex-start（顶部对齐） */
            align-content: flex-start;
            /* flex-end（底部对齐） */
            /* align-content: flex-end;   */
            /* center（垂直居中） */
            /* align-content: center; */
            /* space-between（行间距平均分布） */
            /* align-content: space-between; */
            /* space-around;（项目两侧间隔相等） */
            /* align-content: space-around; */
            /* space-evenly(项目之间的间隔相等 ) */
            /* align-content: space-evenly; */
        }
        .container div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

1、align-content: flex-start;

2、align-content: flex-end;

3、align-content: center;

4、align-content: space-between;

5、align-content: space-around;

6、align-content: space-evenly;

四、flex布局常用的子属性

属性名 作用对象 常用值及解释 用途
align-self 子元素 auto（继承容器的align-items）<br>flex-start/flex-end/center/baseline/stretch（单独覆盖容器设置） 单独控制某个子元素在交叉轴的对齐方式
flex 子元素 1（等分容器剩余空间）<br>0 0 auto（固定尺寸）<br>2 1 20px（简写形式，定义 grow/shrink/basis） 控制子元素在主轴方向的伸缩比例（简写属性，包含 flex-grow, flex-shrink, flex-basis）

4.1 align-self:单独控制某个子元素在交叉轴的对齐方式

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>50-flex布局(主轴与侧轴对齐方式)</title>
    <style>
        .container{
            border: 1px solid rgb(0, 0, 0);
            width: 1000px;
            height: 400px;
            display: flex;
            justify-content: space-evenly;
        }
        .container div:nth-child(2){
             /* align-self设置单个弹性盒子，结合结构伪类使用 */
             align-self: center;
        }
        .container div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

4.2 flex:控制子元素在主轴方向的伸缩比例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在默认情况下，主轴的尺寸通过内容撑开，侧轴的尺寸撑满容器 */
        .container{
            border: 1px solid rgb(0, 0, 0);
            width: 1000px;
            height: 400px;
            display: flex;
            flex-direction: column;
        }
        .container div{
            height: 200px;
            background-color: pink;
        }
        .container div:nth-child(1){
            width: 200px;
        }
        .container div:nth-child(2){
            flex:1;
        }
        .container div:nth-child(3){
            flex:2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

五、综合案例

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex综合案例</title>
    <style>
/* 
CSS 书写顺序：
1）. 盒子模型属性
2）. 文字样式 
3）. 圆角、阴影等修饰属性
*/
    *{
    margin: 0;
    padding: 0;
    /* 内减模式 */
    box-sizing: border-box;
    }
    /* 去掉列表的项目符号 */
    li{
        list-style: none;
    }
    .box{
        width: 1200px;
        height: 418px;
        border: 1px solid #aeadad;
        margin: 0 auto;
        border-radius: 8px;
    }
    .box ul{
        display: flex;
        /* 盒子换行 */
        flex-wrap: wrap;
        height: 418px;
        padding: 90px 40px 90px 60px;
        /* 调整主轴对齐方式 */
        justify-content: space-between;
        /* 调整行对齐方式 */
        align-content: space-between;
    }
    .box li{
        display: flex;
        height: 88px;
        width: 500px;
    }
    div img{
        margin-right: 15px;
        height: 88px;
    }
    .box .text h4{
        line-height: 40px;
        font-size: 20px;
        font-weight: 400;
        color: #333;
    }
    .box .text p{
        font-size: 14px;
        color:#666;
    }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./bijiimges/1.svg" alt="">
                </div>
                <div class="text">
                    <h4>一键发布到多端</h4>
                    <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
                </div>  
            </li>
            <li>
                <div class="pic">
                    <img src="./bijiimges/2.svg" alt="">
                </div>
                <div class="text">
                    <h4>管理视频内容</h4>
                    <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
                </div>  
            </li>
            <li>
                <div class="pic">
                    <img src="./bijiimges/3.svg" alt="">
                </div>
                <div class="text">
                    <h4>发布携带组件</h4>
                    <p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
                </div>  
            </li>
            <li>
                <div class="pic">
                    <img src="./bijiimges/4.svg" alt="">
                </div>
                <div class="text">
                    <h4>数据评估分析</h4>
                    <p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p>
                </div>  
            </li>
        </ul>
    </div>
</body>
</html>

六、总结

属性名 作用对象 常用值及解释 用途
display 父容器 flex：将容器设为弹性布局模式 定义弹性容器，使子元素成为弹性项目
flex-direction 父容器 row（默认，主轴水平向右） row-reverse（主轴水平向左） column（主轴垂直向下） column-reverse（主轴垂直向上） 定义主轴方向，决定子元素排列顺序
justify-content 父容器 flex-start（左对齐） flex-end（右对齐） center（居中） space-between（两端对齐，项目间隔相等） space-around（项目两侧间隔相等） space-evenly(项目之间的间隔相等 ) 控制主轴方向上的对齐方式
align-items 父容器 stretch（默认，拉伸填满容器） flex-start（顶部对齐） flex-end（底部对齐） center（垂直居中） baseline（基线对齐） 控制交叉轴方向上的对齐方式
flex-wrap 父容器 nowrap（默认，不换行） wrap（换行，第一行在上方） 控制子元素是否换行
align-content 父容器 stretch（默认，拉伸占满容器） flex-start（顶部对齐） flex-end（底部对齐） center（垂直居中） space-between（行间距平均分布） space-around;（项目两侧间隔相等） space-evenly(项目之间的间隔相等 ) 多行子元素在交叉轴的对齐方式（需配合 flex-wrap: wrap 使用）
align-self 子元素 auto（继承容器的align-items）<br>flex-start/flex-end/center/baseline/stretch（单独覆盖容器设置） 单独控制某个子元素在交叉轴的对齐方式
flex 子元素 1（等分容器剩余空间）<br>0 0 auto（固定尺寸）<br>2 1 20px（简写形式，定义 grow/shrink/basis） 控制子元素在主轴方向的伸缩比例（简写属性，包含 flex-grow, flex-shrink, flex-basis）
相关推荐
weixin_382395237 小时前
为小工厂量身打造：本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__7 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.8 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~9 小时前
CSS元素显示模式（display）
前端·css
AI大模型-小华9 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子12 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅12 小时前
架构没变、规模没变，DeepSeek V4 Flash 正式版凭什么暴涨 47 分？
前端·aigc·deepseek
jarvisuni12 小时前
DeepSeekFlash前端依旧拉垮，而且变慢了很多！
前端·javascript·算法
卷福同学13 小时前
AI编程出海第二步：验证关键词能否做站
前端·人工智能·后端
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路0800 Debian字符界面如何支持中文09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10历年考研数学一、数学二、数学三真题试卷及答案PDF