深入掌握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）
相关推荐
a濯1 小时前
element plus el-table多选框跨页多选保留
javascript·vue.js
蓝婷儿1 小时前
前端面试每日三题 - Day 32
前端·面试·职场和发展
星空寻流年2 小时前
CSS3(BFC)
前端·microsoft·css3
九月TTS2 小时前
开源分享：TTS-Web-Vue系列：Vue3实现固定顶部与吸顶模式组件
前端·vue.js·开源
H309192 小时前
vue3+dhtmlx-gantt实现甘特图展示
android·javascript·甘特图
CodeCraft Studio2 小时前
数据透视表控件DHTMLX Pivot v2.1发布，新增HTML 模板、增强样式等多个功能
前端·javascript·ui·甘特图
一把年纪学编程2 小时前
【牛马技巧】word统计每一段的字数接近“字数统计”
前端·数据库·word
llc的足迹3 小时前
el-menu 折叠后小箭头不会消失
前端·javascript·vue.js
九月TTS3 小时前
TTS-Web-Vue系列：移动端侧边栏与响应式布局深度优化
前端·javascript·vue.js
Johnstons3 小时前
AnaTraf：深度解析网络性能分析（NPM）
前端·网络·安全·web安全·npm·网络流量监控·网络流量分析
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08苍穹外卖面试总结09DeepSeek各版本说明与优缺点分析10【操作系统】Linux之网络编程(TCP)（头歌作业）