🔥🔥🔥手把手Flex实战：从空白文件到完整页面的思考过程本期教程通过一个完整的 Flex 布局实战，手把手带你从

前言

上一期我们介绍了关于flex-box的各种属性，有容器属性和项目属性，并探讨了利用flex布局如何更简便地使得元素居中，如果还有没看的，友情链接在此👇👇👇：

🎯 《Flex布局奇妙历险：从菜鸟到面试王者！》

这一期是flex布局实战小demo，接下来我们将要从空白页面一步一步做出以下页面

需要用的素材：

通过网盘分享的文件：img.zip 链接: pan.baidu.com/s/1e19E_Ds3…

提取码: 6666

by the way，在这里要推荐一下蓝湖和阿里巴巴矢量图标库

ok话不多说，我们开始发车了~

1. 整体页面的构建

HTML结构的设计

当我们拿到这个页面需求时，我们要先关注这个页面的结构，看看该如何使用HTML来构建此页面。很明显，这个页面可以分为三个部分：header/body/footer，然后整个页面用一个Container框起来。

至于CSS样式，我们可以选择引入外联CSS样式表。

那么如此设计，代码就如下：

屏幕截图 2025-05-25 153517.png 利用Emmet缩写快速构造出我们需要的HTML内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First demo</title>
    <link rel="stylesheet" href="play.css"> <!--在此html的同级文件夹下创建"play.css"文件，并引入css样式表-->
</head>
<body>
    
<div class="container">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>


</body>
</html>

OK，我们将页面划分成三个大部分，接下来我们进行对于整体页面样式的修改：需求中整体页面的样式是这样的：

关于为什么padding都是这样

在拿到设计稿后，我们可以利用蓝湖（一款设计软件）来查看设计稿，当鼠标移动到相应元素时会显示这个元素与其他元素的关系，由于我没有蓝湖的付费版hhhhhhh，所以我只能将这个页面原来的设计以这种形式放出，后面看到我莫名其妙告诉你们某些元素样式也不要担心，因为设计稿本来就是这样.......

CSS对于页面整体的设计

首先对于CSS文件的构建：我们先写下如下内容：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

这一段是做初始化工作，非常重要！！！

因为页面内容在浏览器显示的时候会默认添加一些margin和padding，我们要做初始化将其设置为0，box-sizing要利用border-box，更方便我们给元素移动和添加样式，具体border-box和content-box的区别请看这一期：CSS样式新手入门

随后针对我们的整体设计开始动工：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.container{
    width:750px;   /*这个页面的总宽高为 750px 400px*/
    height:400px;
    
    padding:105px 54px 0 63px; 
}

做到这里，整体的设计就结束了，下一步我们开始对header进行设计。

2.header的结构构建和样式设计

当我们看到Header的设计时，我们会发现header内一共有3个元素并且均为横向排列，

那么请你们大声告诉我，横向排列用什么布局！！！！！！！！！！！！！！！！！

没错就是使用flex布局！！！ok既然我们知道了header内有几个元素了，也知道用什么布局来做了，那么我们就开始吧。

接下来设计header内的HTML结构：

<div class="header">
            <img class='topLeft' src="img/1.png" alt="1">
            <span class='topMiddle'> Playlist</span>
            <img class='topRight' src="img/2.png" alt="2">
        </div>

接下来是CSS的样式：首先是对于容器属性的设置，这个时候就要记起来上期所讲的各种容器属性了哦~ 让我们看看图：

于是乎，父容器就有以下属性：

.header{
    display: flex;      
    justify-content: space-between;
    align-items: center;
}

当我们解决了header的整体布局后，要做的就是对于三个元素的大小字体等进行微调了：

.topLeft{
    width:24px;  /*仅调整宽度后，元素等比例放大缩小*/
}
.topRight{
    width:43px;
}
.topMiddle{
    font-size:33px;          /*设计稿就是这些属性*/
    font-family: SF Pro Text;
    font-weight: bold;
    line-height: 43px;
    color:rgba(55,53,57,1);
}

于是，我们现在页面的成果如下：

header就解决了~~~~ (๑•̀ㅂ•́)و✧

3.body的结构构建和设计

对于设计结构的分析

看到我们的图片，body其实可以设计为一条音乐的信息，然后复用同样的元素即可，也就是：

我们把这一条当作body，其他的CV一下就好了....

那么我们开始观察这个效果该如何实现吧：首先我们一看，嘿！它和前面的不一样唉，虽然他肯定利用flex布局，但是它的文字和图标离得比较近哎！这时候有小伙伴就要想了：justify-content该用啥呢？flex-start?flex-end?space-between? NONONO!好像这些都不行哎.....

那该怎么办呢？答案是flex布局的嵌套：

我们把这个分成两个部分，left和right，利用flex布局，justify-content: space-between 将两个元素分别分布在body的两侧，就完成了这个基本布局，之后如何实现middleLeft中图片和文字的布局呢？ 那就是把middleLeft变为弹性布局，再将其中元素的交叉轴方向对齐即可。

HTML结构设计

body内有4个元素，则 HTML元素设计为：

<div class="body">
            <div class="middleLeft">
                <img src="img/3.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">Afterglow</span>
                <span class="Writer">Taylor Swift</span>
                </div>
            </div>
            <div class="middleRight">
                <span class="SongLength">3:43</span>
            </div>
 </div>

为何要给文字单独加class？

我们可以看到文字是上下排列，则我们可以利用弹性布局的 flex-direction：column 使得两个span进行上下排列，所以要给他们加一个父元素。

CSS样式设计

body整体的CSS设计

由此可以给父容器body添加样式：

.body{
height:190px;
width:100%; /*由设计图看出其是铺满的*/
display:flex;
justify-content:space-between;
align-items:center;
border-bottom: 2px solid rgba(196,196,196,1);/*下划线*/
}

做出来效果是这样： ok不用担心，只是因为图片太大把其他元素挤了出去而已，可以给img设置宽高（按设计图来的）：

.playImg{
    width:31px;
    
}

这下我们的布局就初具雏形了。

middleLeft的CSS样式设计

在我们的设计图中，播放图片和文字是左右排列的，所以在这里我们也要利用flex布局：

.middleLeft{
    display: flex;
    align-items: center;
}

结果如下：调整图片和文字的间距：

.playImg{
    width:31px;
    margin-right: 60px;
}

MiddleText的CSS设计

随后呢，我们看到歌曲名和歌手名是上下排列，于是我们给MiddleText添加flex布局属性，修改相应样式：

.MiddleText{
    display: flex;
    flex-direction: column;  /*竖向排列*/
    justify-content: center; /*分布在主轴中心，此时主轴为y轴*/
    align-items: flex-start; /*使得文字向左对齐（交叉轴为x轴）*/
    
}
.MiddleText>span:nth-child(1){   /*以下内容均为设计稿所得，直接CV即可，不用纠结*/
    font-size: 29px;
    font-family: SF Pro Text;
    font-weight: 600;
    line-height: 28px;
    color:rgba(55,53,57,1);
    margin-bottom:5px;
}
.MiddleText>span:nth-child(2){
    font-size: 27px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 36px;
    color:rgba(123,122,124,1);
}

加入完CSS结果如下：

middleRight的CSS设计

最后再给右方播放时间添加样式：

 .middleRight{
    font-size: 27px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 36px;
    color:rgba(123,122,124,1);
}

这样我们就完成了，随后我们多复制几个body在页面，修改一下内容：

    <div class="header">
        <img class='topLeft' src="img/1.png" alt="1">
            <span class='topMiddle'> Playlist</span>
            <img class='topRight' src="img/2.png" alt="2">
        </div>
      <div class="body">
            <div class="middleLeft">
                <img src="img/3.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">Afterglow</span>
                <span class="Writer">Taylor Swift</span>
            </div>
        </div>
            <div class="middleRight">
                <span class="SongLength">3:43</span>
            </div>

        </div>
        <div class="body">
            <div class="middleLeft">
                <img src="img/播放.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">The Man</span>
                <span class="Writer">Taylor Swift</span>
            </div>
        </div>
            <div class="middleRight">
                <span class="SongLength">3:10</span>
            </div>

        </div>
        <div class="body">
            <div class="middleLeft">
                <img src="img/播放.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">Daylight</span>
                <span class="Writer">Taylor Swift</span>
            </div>
        </div>
            <div class="middleRight">
                <span class="SongLength">4:53</span>
            </div>

        </div>

最后的margin问题

我们可以看到第一条音乐的信息距离我们的header太近了和我们设计图不符合：

屏幕截图 2025-05-25 151005.png 让我们看看设计图：

如图我们知道了每个body的内容距离顶部的距离为53px，而第一条信息距离顶部的距离为121px，那么我们就知道了header和body中间有 121-53 = 68px的距离，所以我们要给header加上：margin-bottom：68px。

4.footer的结构设计

关于footer的结构，我们可以看到其和body别无二致，当看到设计图时，脑子里瞬间想到的就是怎么划分区域，用什么布局，只要每次看到设计图都能这么想，构建就很简单了！ 首先它的结构和body一样，整体为flex布局，

左边又有1个flex-box包裹图片和文字，右边仅仅是图片

文字单独又是一个flex-box....

这样我们就可以设计HTML和CSS了

整体设计

接下来就不带着大家一起做了，它的结构和body几乎是完全一样的，只是有一个背景色，宽高都是设计图规定好的......

<div class="footer">
        <div class="footerLeft">
            <img src="转存失败，建议直接上传图片文件 img/lover.jpg" alt="4转存失败，建议直接上传图片文件" class="playImgF">
            <div class="footerText">
                <span class="SongNameF">Afterglow</span></div></div></div>

                <span class="WriterF">Taylor Swift</span>
                
            </div>
        </div>
        <div class="footerRight">
            <img src="img/3.png" alt="5" class="playF">
        </div>
    </div>

.footer{
    position:fixed;
    bottom:0;
    
    background-color: #FAF7FA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:750px;
    height:145px;
    box-sizing: border-box;
    padding:0 54px 0 63px; /*内容和边界之间有间距*/ 

}
.footerLeft{
    display: flex;
    justify-content: space-between;
}
.footerText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.playImgF{
    width:116px;
    margin-right:33px;
}
.playF{
    width:31px;
}
.SongNameF{
    font-size: 29px;
    font-family: SF Pro Text;
    font-weight: 600;
    line-height: 28px;
    color:rgba(55,53,57,1);
    margin-bottom:5px;
}
.WriterF{
    font-size: 27px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 36px;
    color:rgba(123,122,124,1);
}

哎！有的小伙伴发现了，说：主播主播，你这瓜不熟啊！我的footer都溢出到外面了！

嘿！我做主播的混迹各大夜店能卖你生瓜蛋子不成？！

让我们看看现在的情况：

这个时候我们会发现，footer在container中，左边有个padding，导致本应横向铺满页面的footer溢出了，那该怎么办呢？

既然设计图中的footer是横向铺满页面的，也就是说它和body和header都不一样，那么我们就可以单独把footer从container中拿出来！

好了，这一个flex布局的小demo我们就写完了~~~ 大家真棒(๑•̀ㅂ•́)و✧！奖励一下自己吧！咳咳咳，当然我说的是正经的奖励，嘻嘻嘻。

完整源码

结果图：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First demo</title>
    <link rel="stylesheet" href="play.css"> 
</head>
<body>
    
<div class="container">
    <div class="header">
        <img class='topLeft' src="img/1.png" alt="1">
            <span class='topMiddle'> Playlist</span>
            <img class='topRight' src="img/2.png" alt="2">
        </div>
      <div class="body">
            <div class="middleLeft">
                <img src="img/3.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">Afterglow</span>
                <span class="Writer">Taylor Swift</span>
            </div>
        </div>
            <div class="middleRight">
                <span class="SongLength">3:43</span>
            </div>

        </div>
        <div class="body">
            <div class="middleLeft">
                <img src="img/播放.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">The Man</span>
                <span class="Writer">Taylor Swift</span>
            </div>
        </div>
            <div class="middleRight">
                <span class="SongLength">3:10</span>
            </div>

        </div>
        <div class="body">
            <div class="middleLeft">
                <img src="img/播放.png" alt="3" class="playImg">
                <div class="MiddleText">
                <span class="SongName">Daylight</span>
                <span class="Writer">Taylor Swift</span>
            </div>
        </div>
            <div class="middleRight">
                <span class="SongLength">4:53</span>
            </div>

        </div>
 
</div>
<div class="footer">
        <div class="footerLeft">
            <img src="img/lover.jpg" alt="4" class="playImgF">
            <div class="footerText">
                <span class="SongNameF">Afterglow</span>
                
                <span class="WriterF">Taylor Swift</span>
                
            </div>
        </div>
        <div class="footerRight">
            <img src="img/3.png" alt="5" class="playF">
        </div>
    </div>
</body>
</html>

CSS：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.container{
    width:750px;
    height:400px;
    
    padding:105px 54px 0 63px; 
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
   margin-bottom: 68px;
}
.topLeft{
    width:24px;
}
.topRight{
    width:43px;
}
.topMiddle{
    font-size:33px;
    font-family: SF Pro Text;
    font-weight: bold;
    line-height: 43px;
    color:rgba(55,53,57,1);
}
.body{
    
    width:100%;
    height:190px;
    border-bottom: 2px solid rgba(196,196,196,1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


 .middleLeft{
    display: flex;
    align-items: center;
}
.playImg{
    width:31px;
    margin-right: 60px;
}
.MiddleText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
}
.MiddleText>span:nth-child(1){
    font-size: 29px;
    font-family: SF Pro Text;
    font-weight: 600;
    line-height: 28px;
    color:rgba(55,53,57,1);
    margin-bottom:5px;
}
.MiddleText>span:nth-child(2){
    font-size: 27px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 36px;
    color:rgba(123,122,124,1);
}
 .middleRight{
    font-size: 27px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 36px;
    color:rgba(123,122,124,1);
}  
.footer{
    position:fixed;
    bottom:0;
    
    background-color: #FAF7FA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:750px;
    height:145px;
    box-sizing: border-box;
    padding:0 54px 0 63px; 

}
.footerLeft{
    display: flex;
    justify-content: space-between;
}
.footerText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.playImgF{
    width:116px;
    margin-right:33px;
}
.playF{
    width:31px;
}
.SongNameF{
    font-size: 29px;
    font-family: SF Pro Text;
    font-weight: 600;
    line-height: 28px;
    color:rgba(55,53,57,1);
    margin-bottom:5px;
}
.WriterF{
    font-size: 27px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 36px;
    color:rgba(123,122,124,1);
}

结语

通过这个实战项目，我们从零开始，逐步构建了一个完整的页面，亲身体验了 Flex 布局的强大与灵活。在这个过程中，我们不仅掌握了关键属性（如 justify-content、align-items、flex-grow/shrink/basis），更重要的是，学会了如何 用 Flex 思维规划布局——从结构分析到代码实现，再到调试优化。

当然本期只是简单的教了大家怎么用flex布局实现了一个页面，这个页面是纯静态的，没有交互的，大家也可以自己去学一学其他的知识，在这个网页之上继续优化，虽然是静态页面，但是我相信大家对于构建网页的思路已经很清晰了，加油鸭！

🚀 继续探索

Flex 布局只是现代 CSS 布局的一部分，接下来你可以：

结合 Flex + Grid，打造更复杂的响应式架构
尝试 Flexbox 嵌套，解决更深层次的布局挑战
深入学习 主轴与交叉轴的对齐策略，精细控制每一个细节

我们希望这个实战教程帮助你建立了 「用 Flex 思路解决问题」 的能力，而不是死记硬背属性。记住，布局的核心是 理解需求，选择合适的工具，而 Flex 就是这个工具箱里的强力武器！

动手实践，多多尝试，你一定会成为布局高手！ 💪

（欢迎在评论区分享你的 Flex 布局作品或遇到的难题，我们一起探讨优化！）

PS：学习内容来源：耕耕技术宅

他讲的前端课程对新手真的很友好，强烈推荐！！！！！