flex布局总结

小羊卷

已于 2022-03-23 22:03:39 修改

阅读量2k

点赞数 2

文章标签： css 前端 html css3

于 2022-03-22 22:11:28 首次发布

本文链接：https://blog.csdn.net/loxia/article/details/123673185

版权

（一）flex前置知识点

1.写在父盒子身上的属性

1.display：flex （声明，将这个盒子设置flex属性，变成flex容器，那么里面的子盒子就是容器成员，通过以下属性可以控制子盒子的排列）

2.主轴？侧轴？

父盒子成为容器后，里面的子盒子会在主轴上排列，默认x轴为主轴，即

flex-direction：row（默认）

要想让子盒子竖着排列，那就需要把轴转换成y轴

flex-direction：column（列）

有主轴就有侧轴，如果横着的x轴是主轴，那么竖着的y轴就是侧轴，反之，y轴是主轴，x轴是侧轴。

3.下面的属性是控制子盒子在主轴上的排列方式

justify-content：flex-start （默认）/ flex-end（倒着排列） / center（居中排列） / space-between（左右/上下贴边，其他的间隔相同） / space-around （平均分配父盒子剩余宽度）

*** 假如父盒子宽度为800px 子盒子默认在主轴x轴上排列，子盒子的宽度为200px 那么4个子盒子就可以填满父盒子的宽度。

如果此时，再增加子盒子的数量，子盒子是否会换行？

答：子盒子不会换行会强制缩小子盒子的宽度，使他们依旧在一行中显示

4.依据上面的问题引出如果换行？

flex-wrap：nowrap（默认不换行）设置为 flex-wrap：wrap（换行）

5.想要控制子盒子水平垂直居中？（以下所有都默认主轴为x轴）

操作方法：主轴方向垂直居中（justify-content：center）

？？？

第二步？如何让他垂直也居中呢？

改变主轴方向？

不！始终逃不出侧轴

6.控制子盒子在侧轴排列的属性（以下分为单行和多行，会有稍许不同）

align-items：center /flex-start /flex-end / stretch（拉伸盒子高度）解释不多赘述，就最后一个是拉伸长度，可以不用考虑，常用就是center

7.多行侧轴属性

align-content：flex-start （默认）/ flex-end（倒着排列） / center（居中排列） / space-between（左右/上下贴边，其他的间隔相同） / space-around （平均分配父盒子剩余宽度）/ stretch（拉伸）

2.写在子盒子身上的属性

1.flex：数值/百分比

解释：占据父盒子的份数下列案例：分别指定flex： 1 flex ：2 flex：3 会发现他们的宽度是不一样大的，相当于把父盒子的宽度平均的分成了（1+2+3）6份。

flex ：1 说明占父盒子宽度的 1/6 flex ： 2 说明占父盒子宽度的 2 /6 flex ：3 说明占父盒子宽度的 3/6；

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 80%;
            height: 500px;
            background-color: pink;
        }

        span {
            height: 100px;
            /* background-color: blue; */
        }

        .one {
            flex: 2;
            background-color: blue;
        }

        .two {
            flex: 3;
            background-color: skyblue;
        }

        .three {
            flex: 1;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
    </div>
</body>

</html>

2.order （排序）

没什么卵用改变子盒子的排列顺序默认从0 开始

假设我们想要让第二个盒子在不改变html结构的前提下，排在第一个盒子前面，那么只需要给第二个盒子设置orde：-1即可！

所以：子盒子排列顺序，是按照从小到大排列的，order就是改变他们的序号。

3.align-self （子盒子自己的排列方式）几乎用不到

注意要区分开 align-items 使用在父盒子上的排列是针对所有的子盒子，而写在子盒子上的 align-self只针对自身。

属性：

align-self： flex-end / flex-start / center / stretch

*以上就是所有的学习flex的基础知识

（二）布局！

学了就要用，接下来讲解flex布局案例携程网！！！

1.准备工作：建立文件夹 (任何一种布局都是如此，所以要习惯)

css 放置 normalize.css index.css

index.html 主页

images 存放不常更换的图片，比如精灵图，logo等

uploads 存放产品类图片

2.首页引入基础样式设置视口标签（* normalize.css一定要在index.css前面，方便我们自身设置的样式覆盖初始化样式）

<meta name="viewport" content="width=device-width, user-scalable=no, 
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">

3.设置body样式

要求：最大最小宽度居中显示设置字体字号行高主页的背景颜色等以及取消手指点击出现高亮效果取消页面滚动条等（ps：都是携程网站上写出来的）

body {
    /*这一段是复制粘贴的携程官网的body初始化*/
    color: #000;
    /* 取消页面横向滚动条 */
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*  */
    -webkit-text-size-adjust: none;
    /* -moz-user-select: none; */
    max-width: 540px;
    width: 100%;
    min-width: 320px;
    margin: 0 auto;
    background: #f4f4f4;
    /* 英文字体中间有空格的要用引号包裹起来 */
    font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, ' Microsoft Yahei', STXihei, hei;
}

4.页面分析及代码书写

以下为携程网代码块要点在于nav部分的书写，使用两种方法，明显没有注释的要比注释掉的结构更加清晰。

html结构代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 顶部搜索 -->
    <div class="header-index">
        <div class="search">
            搜索:目的地/酒店/景点/航班号
        </div>
        <a href="#">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="banner-index">
        <img src="./upload/focus.jpg" alt="">
    </div>
    <!-- 局部导航栏模块 -->
    <ul class="local-nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="ico"></span>
                景点·玩乐
            </a>
        </li>

        <li>
            <a href="#" title="景点·玩乐">
                <span class="ico"></span>
                景点·玩乐
            </a>
        </li>

        <li>
            <a href="#" title="景点·玩乐">
                <span class="ico"></span>
                景点·玩乐
            </a>
        </li>

        <li>
            <a href="#" title="景点·玩乐">
                <span class="ico"></span>
                景点·玩乐
            </a>
        </li>

        <li>
            <a href="#" title="景点·玩乐">
                <span class="ico"></span>
                景点·玩乐
            </a>
        </li>

    </ul>
    <!-- 大导航栏模块 -->
    <!-- <div class="nav-box">
        <ul class="nav">
            <li><a href="#">
                    <span>海外酒店</span>
                </a></li>
            <li><a href="#">
                    <span>海外酒店</span>
                    <span>特价酒店</span>
                </a></li>
            <li><a href="#">
                    <span>海外酒店</span>
                    <span>特价酒店</span>
                </a></li>
        </ul>
        <ul class="nav">
            <li><a href="#">
                    <span>海外酒店</span>
                </a></li>
            <li><a href="#">
                    <span>海外酒店</span>
                    <span>特价酒店</span>
                </a></li>
            <li><a href="#">
                    <span>海外酒店</span>
                    <span>特价酒店</span>
                </a></li>
        </ul>
        <ul class="nav">
            <li><a href="#">
                    <span>海外酒店</span>
                </a></li>
            <li><a href="#">
                    <span>海外酒店</span>
                    <span>特价酒店</span>
                </a></li>
            <li><a href="#">
                    <span>海外酒店</span>
                    <span>特价酒店</span>
                </a></li>
        </ul>
    </div> -->
    <div class="nav">
        <div class="nav-content">
            <div class="nav-hot">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-hot">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-hot">
                <a href="#">团购</a>
                <a href="#">民宿·客栈</a>
            </div>
        </div>
        <div class="nav-content">
            <div class="nav-hot">
                <a href="#">机票</a>
            </div>
            <div class="nav-hot">
                <a href="#">火车票</a>
                <a href="#">特价机票</a>
            </div>
            <div class="nav-hot">
                <a href="#">汽车票·船票</a>
                <a href="#">专车·租车</a>
            </div>
        </div>
        <div class="nav-content">
            <div class="nav-hot">
                <a href="#">旅游</a>
            </div>
            <div class="nav-hot">
                <a href="#">门票</a>
                <a href="#">目的地攻略</a>
            </div>
            <div class="nav-hot">
                <a href="#">邮轮旅行</a>
                <a href="#">定制旅行</a>
            </div>
        </div>

    </div>
    <!-- nav-link模块 -->
    <div class="nav-link">
        <a href="#">
            <span class="ico-w"></span>
            电话费</a>
        <a href="#">
            <span class="ico-w"></span>
            外币兑换</a>
        <a href="#">
            <span class="ico-w"></span>
            购物</a>
        <a href="#">
            <span class="ico-w"></span>
            当地向导</a>
        <a href="#">
            <span class="ico-w"></span>
            自由行</a>
        <a href="#">
            <span class="ico-w"></span>
            境外玩乐</a>
        <a href="#">
            <span class="ico-w"></span>
            信用卡</a>
        <a href="#">
            <span class="ico-w"></span>
            更多</a>
        <a href="#">
            <span class="ico-w"></span>
            保险</a>
        <a href="#">
            <span class="ico-w"></span>
            信用卡</a>

    </div>
    <!-- 热门活动模块 -->
    <div class="active-index">
        <div class="active-top">
            <span class="hot"></span>
            <span class="welfare">获取更多福利 ></span>
        </div>
        <div class="active-bd">
            <span class="bd-left">
                <img src="./upload/pic1.jpg" alt="">
            </span>
            <span class="bd-right">
                <img src="./upload/pic2.jpg" alt="">
            </span>
        </div>
        <div class="active-bd">
            <span class="bd-left">
                <img src="./upload/pic3.jpg" alt="">
            </span>
            <span class="bd-right">
                <img src="./upload/pic4.jpg" alt="">
            </span>
        </div>
        <div class="active-bd">
            <span class="bd-left">
                <img src="./upload/pic5.jpg" alt="">
            </span>
            <span class="bd-right">
                <img src="./upload/pic6.jpg" alt="">
            </span>
        </div>
    </div>
    <!-- 底部模块 -->
    <footer>
        <a href="#">
            <span class="footico"></span>
            电话预定
        </a>
        <a href="#">
            <span class="footico"></span>
            下载客户端
        </a>
        <a href="#">
            <span class="footico"></span>
            我的
        </a>
    </footer>
    <div class="footer-link">
        <p>
            <a href="#">网站地图</a>
            <a href="#">@language</a>
            <a href="#">电脑版</a>
        </p>
        <p>
            <a href="#">@2018携程旅行</a>
            <a href="#">8535863</a>
        </p>
    </div>
</body>

</html>

css代码

body {
    /*这一段是复制粘贴的携程官网的body初始化*/
    color: #000;
    /* 取消页面横向滚动条 */
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*  */
    -webkit-text-size-adjust: none;
    /* -moz-user-select: none; */
    max-width: 540px;
    width: 100%;
    min-width: 320px;
    margin: 0 auto;
    background: #f4f4f4;
    /* 英文字体中间有空格的要用引号包裹起来 */
    font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, ' Microsoft Yahei', STXihei, hei;
}

a {
    text-decoration: none;
    color: #333;
}

img {
    vertical-align: middle;
    /* 去掉插入的图片的默认边框 */
    border: 0;
    outline: none;
}

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

li {
    list-style: none;
}

/* 顶部搜索 */
.header-index {
    position: fixed;
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    display: flex;
    height: 44px;
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.search {
    position: relative;
    flex: 1;
    height: 26px;
    margin: 7px 10px;
    /* background-color: blue; */
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px #ccc;
    font-size: 12px;
    color: #666;
    padding-left: 25px;
    line-height: 26px;
}

.search::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;

}

.header-index a {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}

.header-index a::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -58px -192px;
    background-size: 103px auto;
    margin: 3px auto 0px;
}

/* 焦点图模块 */
.banner-index {
    padding-top: 45px;
}

.banner-index img {
    width: 100%;
}

/* 局部导航栏模块 */
.local-nav {
    display: flex;
    height: 64px;
    background-color: #fff;
    margin: 5px;
    border-radius: 8px;
}

.local-nav li {
    flex: 1;
}

.local-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
    font-size: 12px;

}

.ico {
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
    margin-bottom: 3px;
}

.local-nav li:nth-child(2) a .ico {
    background-position: 0 -32px;
}

.local-nav li:nth-child(3) a .ico {
    background-position: 0 -64px;
}

.local-nav li:nth-child(4) a .ico {
    background-position: 0 -96px;
}

.local-nav li:nth-child(5) a .ico {
    background-position: 0 -128px;
}

/* 大导航栏模块  */
/* .nav {
    display: flex;
    height: 2.3467rem;
    
    margin: 0 .1333rem;
    margin-bottom: .1333rem;
    border-radius: .2133rem;
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}

.nav li {
    flex: 1;
}

.nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 2.3467rem;
}

.nav li:nth-child(-n+2) a {
    border-right: .0267rem solid #fff;

}

.nav li a span {
    flex: 1;
    line-height: 1.1733rem;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: .3733rem;
    text-shadow: .0267rem .0267rem #000;
}

.nav li:first-child a span {
    background: url(../images/hotel.png) no-repeat bottom;
    background-size: 3.2267rem auto;
}

.nav li:nth-child(n+2) a span:first-child {
    border-bottom: .0267rem solid #fff;
}

.nav-box .nav:nth-child(2) {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
} 

.nav-box .nav:nth-child(3) {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}*/
/* 方法二 */
.nav {
    margin: 0 5px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

.nav-content {
    display: flex;
    height: 88px;
    background: -webkit-linear-gradient(left, #fa5c55, #fa984e)
}

.nav-content:nth-child(2) {
    margin: 3px 0;
    background: -webkit-linear-gradient(left, #4b91ed, #53bced);
}

.nav-content:nth-child(3) {
    background: -webkit-linear-gradient(left, #34c2a8, #6bd45a);
}

.nav-hot {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 88px;
}

.nav-hot:nth-child(-n+2) {
    border-right: 1px solid #fff;
}

.nav-hot:first-child a {
    background: url(../images/hotel.png) no-repeat bottom;
    background-size: 121px auto;
}

.nav .nav-content:nth-child(2) .nav-hot:nth-child(1) a {
    background: url(../images/sprite.png) no-repeat 50px -591px;
    background-size: 217px auto;
}

.nav .nav-content:nth-child(3) .nav-hot:nth-child(1) a {
    background: url(../images/sprite.png) no-repeat 50px -377px;
    background-size: 217px auto;
}

.nav-hot a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    text-shadow: 1px 1px #000;
    font-size: 14px;
}

.nav-hot a:first-child {
    border-bottom: 1px solid #fff;
}

/* nav-link模块 */
.nav-link {
    display: flex;
    flex-wrap: wrap;
    /* height: 116px; */
    background: #fff;
    margin: 5px;
    border-radius: 8px;
    padding: 8px 0px;
}

.nav-link a {
    flex: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-link a span {
    width: 28px;
    height: 28px;
    background: url(../images/subnav-bg.png) no-repeat 0 0;
    background-size: 28px auto;
}

.nav-link a:nth-child(2) span {
    background-position: 4px -29px;
}

.nav-link a:nth-child(3) span {
    background-position: 4px -63px;
}

.nav-link a:nth-child(4) span {
    background-position: 0px -96px;
}

.nav-link a:nth-child(5) span {
    background-position: 0px -127px;
}

.nav-link a:nth-child(6) span {
    background-position: 5px -163px;
}

.nav-link a:nth-child(7) span {
    background-position: 2px -198px;
}

.nav-link a:nth-child(8) span {
    background-position: 2px -229px;
}

.nav-link a:nth-child(9) span {
    background-position: 2px -256px;
}

.nav-link a:nth-child(10) span {
    background-position: 4px -286px;
}

.nav-link a:nth-child(-n+5) {
    margin-bottom: 8px;
}

/* 热门活动模块 */
.active-index {
    background-color: #fff;
    margin: 0 5px;

}

.active-top {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #ccc;

}

.hot {
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0px -19px;
    background-size: 79px auto;
    margin-left: 10px;
    margin-top: 5px;
}

.welfare {
    padding: 2px 20px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
    margin-right: 5px;
}

.active-bd {
    display: flex;
    border-top: 1px solid #ccc;
}


.bd-right {
    flex: 1;
}

.bd-left {
    flex: 1;
    border-right: 1px solid #ccc;
}

.bd-left img {
    width: 100%;
}

.bd-right img {

    width: 100%;
}

/* 底部模块 */
footer {
    display: flex;
    height: 50px;
    background-color: #fff;
    margin: 8px 5px 5px;
}

footer a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footico {
    width: 18px;
    height: 18px;
    background: url(../images/sprite.png) no-repeat -59px -152px;
    background-size: 104px auto;
    margin: 5px 0;
}

footer a:nth-child(2) .footico {
    background-position: -59px -172px;
}

footer a:nth-child(3) .footico {
    background-position: -60px -310px;
}

/* .footer-link */
.footer-link {
    text-align: center;
    font-size: 12px;
}

.footer-link p:first-child a:nth-child(2) {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 0 5px;
}

.footer-link p:first-child {
    margin-bottom: 3px;
}

.footer-link p:last-child a {
    color: #ccc;
}

.footer-link p:last-child a:first-child {
    border-right: 1px solid #ccc;
    padding-right: 5px;
}

补充最后一个要点：fixed 固定定位固定定位一定要给宽度而且在移动端布局，一定要给最大和最小宽度，固定定位以浏览器可视区域定位不限制宽度会直接变得很长。

第二：我代码中没有给top和left 建议不写，但是如果写，一定要left：50% ； transform：translate（-50%）；

这样才能让盒子固定在屏幕正中央！

这是我书写完成后展示的页面