flex布局实例讲解，兄弟看flex布局案例这一篇就够了！！

置顶卑微前端在线挨打

已于 2023-06-02 17:44:28 修改

阅读量840

点赞数 1

文章标签：前端 css ecmascript

于 2023-04-17 12:38:54 首次发布

本文链接：https://blog.csdn.net/qczzc/article/details/130195501

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、flex布局是什么？
二、flex 案例需求分析
欢迎小伙伴们留言讨论当然也欢迎大佬改正错误哈哈哈哈

前言

提示：主要内容 flex弹性布局以及css：

随着各式各样的移动端web端的出现，自适应屏幕大小就显得格外重要，flex布局就可以很好的解决这一类问题。

提示：以下是本篇文章正文内容

一、flex布局是什么？

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

不了解的小伙伴可以点击 flex布局详细解说了解更多

二、flex 案例需求分析

（1）初始样式：

这是一张初始样式图片

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>爱V猫友情链接</title>
</head>
<body>

    <!--网页头部-->
    <header>
        <h1 class="headLeft">
            <a href="#"><img src="images/logo.jpg" alt="" /></a>
        </h1>
        <div class="headRight">
            <a href="#">登录</a>
            <a href="#" class="active">注册</a>
        </div>
    </header>
    <!--网页主体-->
    <section class="wrap">
        <div class="mian">
            <ul class="mianLeft">
                <li><a href="#">公司介绍</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">招才纳士</a></li>
                <li><a href="#">用户协议</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">付费协议</a></li>
                <li><a href="#">使用说明</a></li>
            </ul>
            <section class="mianRight">
                <h2>友情链接</h2>
                <ul class="picList">
                    <li>
                        <a href="#"><img src="images/lk_logo01.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo02.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo03.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo04.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo05.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo06.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo07.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo08.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo09.jpg" alt="" /></a>
                    </li>
                </ul>
            </section>
        </div>
    </section>
    <!--网页底部-->
    <footer>
        <ul>
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">新闻动态</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">招商加盟</a></li>
            <li><a href="#">招商用户</a></li>
            <li><a href="#">协议合作伙伴</a></li>
            <li><a href="#">常见问题App</a></li>
            <li><a href="#">下载网站地图</a></li>
        </ul>
        <p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号</p>
        <p>Coppyright © 2018 iVmall All Rights Reserved</p>
    </footer>
</body>

</html>

（2）需求分析：

（1）需要整体布局为居中

（2）左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色

（3）右侧边链接图片可以随着屏幕的大小自适应换行

（4）底部同样自适应并居中

（5）最终样式

最终效果

（3）案例讲解

（1）实现基础分块

（1）通过最终所要达到的效果图可以将其大致分为 header（头部块）main（内容块也叫主块，怎么好听怎么来）footer （底部块）竖向排列

header

（1）各个击破，先从 header 入手我们可以很清楚地知道 header 大致分为2个部分一个是logo的展示，另一个是 登录注册的操作链接，横向排列，居中布局
（2）代码示例（css）

 header {
 		/*设置header为弹性布局盒子（父）*/
        display: flex; 
        /*盒子内块级元素排列方式为 space-around
         均匀排列每个元素每个元素周围分配相同的空间 */
        justify-content: space-around;
        /* 属性为弹性容器内的项目指定默认对齐方式，这里为center*/
        align-items: center;
 }

如果小伙伴们对flex属性不熟悉的话可以点击 flex属性详解了解更多。

main

（1）main 是整体居中；因此我们需要给main一个宽度（这里推荐使用百分比），然后通过 flex的justify-content:center 设置整体居中布局。

/*.wrap 为.main 的父盒子*/
 .wrap {
 		/*设置盒子为弹性布局 flex*/
        display: flex;
  		/*设置盒子内子元素整体 居中*/
        justify-content: center;
        /*给定一个背景颜色*/
        background-color: aqua;
 }

（2） mian 我们同样可以很清楚地知道 main 大致分为2个部分一个是侧边栏（mianLeft）的展示，另一个是 ** 友情链接图片（mianRight），整体横向排列，居中布局**；但是我们仔细看可以知道，
1：mianLeft 中是占整体父元素的1/3竖向排列并且 li 和 a 标签的原生样式是没有的。

.mian .mianLeft {
		/*flex:1表示将父元素整体作为单位一 占这个单位一的 1/单位一*/
        flex: 1;
        text-align: center;
        background-color: rgb(239, 239, 239);
        padding-top: 40px;
    }
    
    .mian .mianLeft li {
        height: 30px;
        font-size: 18px;
        /*设置字体竖向排列居中 这里的 30px 和 父盒子的高度保持一致*/
        line-height: 30px;
        /*去掉 li 默认样式*/
        list-style-type: none;
    }
    
    /*选择鼠标指针浮动在其上的元素，并设置其样式：*/
/*提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。*/
    .mian .mianLeft li:hover {
    	/*鼠标指针移动到元素上面后 background-color ：red*/
        background-color: red;
        color: #fff;
    }
    
    .mian .mianLeft li a:hover {
    	/*同上*/
        color: #fff;
    }
    
    a {
        text-decoration: none; /*去除a的下划线*/
        color: rgb(89, 89, 89);
    }

更多伪类可以点击 :hover详解

2：mianRight 中的图片链接是可以换行的并且整体居中排列

 .mian .mianRight {
 		/*占整体父元素单位一的3份  3/单位一*/
 		/*同上 的 .mainLeft -> flex:1  可以知道整个单位一被平分为4分 mainLeft 占1份 mainRight 占3份*/
        flex: 3;
        background-color: #fff;
    }
    
    /*基础样式不做解析*/
    .mian .mianRight h2 {
        border-bottom: 1px rgb(164, 164, 164) solid;
        font-size: 40px;
        color: rgb(164, 164, 164);
        padding: 20px 0 20px 20px;
    }
    
    .mian .mianRight .picList {
        display: flex;
        width: 100%;
       /* justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。*/
        justify-content: space-evenly;
        /*当父元素宽度不够容纳一行子元素的时候 自动换行*/
        flex-wrap: wrap;
    }
    
    .mian .mianRight .picList li {
     /*去掉 li 默认样式*/
        list-style-type: none;
     /*margin的简写*/
     /*margin: top right buttom left*/
        margin: 10px 0 10px 0;
    }
    
    .mian .mianRight .picList li img {
        width: 200px;
    }

如果小伙伴们对flex属性不熟悉的话可以点击 flex属性详解了解更多。

footer

（1）footer 就是最简单的这里我们直接给出代码相信小伙伴们都能看懂
（2）代码示例（css）

 footer {
    /*字体居中*/
        text-align: center;
    }
    
    footer ul {
        display: flex;
        justify-content: center;
    }
    
    footer ul li {
        margin: 5px;
    }

（4）最终代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>爱V猫友情链接</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style-type: none;
    }
    
    header {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .wrap {
        display: flex;
        justify-content: center;
        background-color: aqua;
    }
    
    .wrap .mian {
        display: flex;
        width: 70%;
        margin: 10px 0 10px 0;
    }
    
    .mian .mianLeft {
        flex: 1;
        text-align: center;
        background-color: rgb(239, 239, 239);
        padding-top: 40px;
    }
    
    .mian .mianLeft li {
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        list-style-type: none;
    }
    
    .mian .mianLeft li:hover {
        background-color: red;
        color: #fff;
    }
    
    .mian .mianLeft li a:hover {
        color: #fff;
    }
    
    a {
        text-decoration: none;
        color: rgb(89, 89, 89);
    }
    
    .mian .mianRight {
        flex: 3;
        background-color: #fff;
    }
    
    .mian .mianRight h2 {
        border-bottom: 1px rgb(164, 164, 164) solid;
        font-size: 40px;
        color: rgb(164, 164, 164);
        padding: 20px 0 20px 20px;
    }
    
    .mian .mianRight .picList {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    
    .mian .mianRight .picList li {
        list-style-type: none;
        margin: 10px 0 10px 0;
    }
    
    .mian .mianRight .picList li img {
        width: 200px;
    }
    
    footer {
        text-align: center;
    }
    
    footer ul {
        display: flex;
        justify-content: center;
    }
    
    footer ul li {
        margin: 5px;
    }
</style>

<body>

    <!--网页头部-->
    <header>
        <h1 class="headLeft">
            <a href="#"><img src="images/logo.jpg" alt="" /></a>
        </h1>
        <div class="headRight">
            <a href="#">登录</a>
            <a href="#" class="active">注册</a>
        </div>
    </header>
    <!--网页主体-->
    <section class="wrap">
        <div class="mian">
            <ul class="mianLeft">
                <li><a href="#">公司介绍</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">招才纳士</a></li>
                <li><a href="#">用户协议</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">付费协议</a></li>
                <li><a href="#">使用说明</a></li>
            </ul>
            <section class="mianRight">
                <h2>友情链接</h2>
                <ul class="picList">
                    <li>
                        <a href="#"><img src="images/lk_logo01.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo02.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo03.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo04.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo05.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo06.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo07.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo08.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo09.jpg" alt="" /></a>
                    </li>
                </ul>
            </section>
        </div>
    </section>
    <!--网页底部-->
    <footer>
        <ul>
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">新闻动态</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">招商加盟</a></li>
            <li><a href="#">招商用户</a></li>
            <li><a href="#">协议合作伙伴</a></li>
            <li><a href="#">常见问题App</a></li>
            <li><a href="#">下载网站地图</a></li>
        </ul>
        <p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号</p>
        <p>Coppyright © 2018 iVmall All Rights Reserved</p>
    </footer>
</body>

</html>

欢迎小伙伴们留言讨论当然也欢迎大佬改正错误哈哈哈哈

卑微前端在线挨打

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
flex布局实例讲解，兄弟看flex布局案例这一篇就够了！！

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、flex布局是什么？二、flex 案例需求分析（1）初始样式：（2）需求分析：（1）需要整体布局为居中（2）左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色（3）右侧边链接图片可以随着屏幕的大小自适应换行（4）底部同样自适应并居中（5）最终样式（3）案例讲解（1）实现基础分块headermainfooter（4）最终代码欢迎小伙伴们留言讨论当然也欢迎大佬改正错误哈哈哈哈前言提示：主要内容 flex弹性布局以及c
复制链接

扫一扫