深入掌握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）
相关推荐
AA-代码批发V哥4 分钟前
CSS之布局详解指南
css
come1123421 分钟前
Vue 响应式数据传递：ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志43 分钟前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5（黑马）
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南