深入掌握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）
相关推荐
excel1 分钟前
JavaScript 中 WeakMap、WeakSet、Set、Map、Object、Array 的区别与应用场景
前端
haaaaaaarry38 分钟前
Element Plus常见基础组件（一）
java·前端·javascript·vue.js
qingyingWin1 小时前
原生微信小程序研发，如何对图片进行统一管理？
前端·微信小程序
不懂英语的程序猿1 小时前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录1 小时前
前端灵魂拷问：从URL到Redux，17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了！🚀🚀🚀
前端·javascript·node.js
mldong2 小时前
推荐一款超高颜值的后台管理模板！Art-Design-Pro！开源！免费！
前端·vue.js·架构
草字2 小时前
uniapp 如果进入页面输入框自动聚焦，此时快速返回页面或者跳转到下一个页面，输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
我是ed.2 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03MSPM0G3507——读取引脚的高低电平方法（数字信号循迹模块）04Coze 开源了，送上保姆级私有化部署方案【建议收藏】05腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07KGG转MP3工具|非KGM文件|解密音频08【手把手攻略】国家育儿补贴正式开领！一键算清你能拿多少钱？附补贴领取计算器09coze 开源版本地部署及踩过的坑【喂饭级教程】10机器学习——多项式回归算法