Flex布局（携程网项目为例）

大大大石头
393 阅读13分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

Flex布局（携程网项目为例）

传统布局和flex布局

传统布局flex布局
兼容性好操作方便，布局简单，移动端应用广泛
布局繁琐PC端兼容性较差
在移动端不能很好的布局IE11和之前的版本不支持或部分支持

建议

  • 如果是PC端页面，我们推荐使用传统布局
  • 移动端或者PC端不考虑兼容性，建议使用flex弹性布局

flex布局原理

flex是flexible Box的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。当我们为父盒子设为flex 布局以后，子元素的float、clear和 vertical-align属性将失效。

通过给父盒子添加display：flex属性，来控制子盒子的排列方式

flex布局属性

父盒子常见属性

属性作用
flex-direction设置主轴的方向
justify-content设置主轴上的子元素排列方式
flex-wrap设置子元素是否换行
align-content设置侧轴上的子元素的排列方式(多行)
align-items设置侧轴上的子元素排列方式(单行)
flex-flow复合属性，相当于同时设置了flex- direction和flex-wrap

flex-direction - 设置主轴方向

主轴和侧轴（交叉轴）：

  • 在flex中，分为主轴和侧轴两个方向，也叫做行和列、X轴和Y轴
  • 默认情况下：主轴就是X轴（水平向右）、侧轴就是Y轴（垂直向下）

**flex-direction属性：**决定主轴的方向（项目（子元素）的排列方向）

书写方法：flex-direction: 属性值；

属性值解释说明
row默认值 - 从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
<style>
    div {
        display: flex;
        /* 修改主轴为垂直方向向下 */
        flex-direction: column;
        width: 800px;
        height: 800px;
        background: pink;
    }
    div span {
        width: 100px;
        height: 100px;
        background: skyblue;
    }
</style>


<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

justify-content - 主轴子元素排列方式

定义项目（子元素）在主轴上的对齐方式，在使用之前一定要先确认主轴方向

书写方法：justify-content: 属性值；

属性值解释说明
flex-start默认值 - 从头部开始，如果主轴是x轴,则从左到右
center在主轴居中对齐(如果主轴是x轴则水平居中)
space-around平分剩余空间
space-between先两边贴边再平分剩余空间(重要)
flex-end在主轴结束位置对齐
<style>
    div {
        display: flex;
        /* 修改主轴为垂直方向向下 */
        flex-direction: column;
        /* 居中对齐 */
        justify-content: center;
        width: 800px;
        height: 500px;
        background: pink;
    }
    div span {
        width: 100px;
        height: 100px;
        background: skyblue;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

flex-wrap - 设置子元素是否换行

flex布局中是默认不换行的（如果超过父盒子子元素会被压缩），可以使用flex-wrap进行调整

书写方法：justify-wrap: wrap；

属性值说明
no-wrap默认值，不需要设置，默认不换行
wrap换行
<style>
    div {
        display: flex;
        /* 居中对齐 */
        justify-content: center;
        /* 设置自动换行 */
        flex-wrap: wrap;
        width: 800px;
        height: 500px;
        background: pink;
    }
    div span {
        width: 140px;
        height: 100px;
        background: skyblue;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

align-items - 侧轴上子元素排列方式（单行）

控制子元素在侧轴（默认Y轴）上的排列方式，在子元素为单行的时候使用

书写方法：align-items: 属性值；

属性值解释说明
flex-start默认值 - 从上到下（顶对齐）
dlex-end从下到上（底对齐）
center挤在一起居中（垂直居中）
stretch拉伸（不设置子元素高度）
<style>
    div {
        display: flex;
        /* 居中对齐 */
        justify-content: center;
        /* 侧轴居中 */
        align-items: center;
        width: 800px;
        height: 500px;
        background: pink;
    }
    div span {
        width: 140px;
        height: 100px;
        background: skyblue;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

align-content - 侧轴上子元素排列方式（多行）

只能用于子元素出现换行的情况下使用（多行），在单行下不起作用

书写方法：align-content: 属性值；

属性值解释说明
flex-start在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头,再平分剩余空间
stretch设置子项元素高度平分父元素高度
<style>
    div {
        display: flex;
        /* 居中对齐 */
        flex-wrap: wrap;
        justify-content: center;
        /* 多行侧轴贴边，中间平均分布 */
        align-content: space-between;
        width: 800px;
        height: 500px;
        background: pink;
    }
    div span {
        width: 140px;
        height: 100px;
        background: skyblue;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

flex-flow复合属性

可以将flex-direction和flex-wrap合写，

书写方法：align-flow: 主轴方向 是否换行；

子盒子常见属性

属性说明
flexflex子元素占用好份数
align-self子元素在自己的侧轴排列方式
order自定义排列顺序（前后）

flex属性

定义子元素如何分配父元素剩余空间，flex代表份数，属性值为数字，默认值为0

书写方法：flex: 数字；

<style>
    * {
        margin: 0;
        padding: 0;
        }
    div {
        display: flex;
        width: 500px;
        height: 100px;
        margin: 50px auto;
        background: pink;
    }
    div span {
        width: 100px;
        height: 100px;
        background: skyblue;
    }
    div span:nth-child(2) {
        background: #765987;
    }
    /* 把剩余空间全部分配给第二个span，flex和=1 */
    .box1 span:nth-child(2) {
        flex: 1;
    }
    /* box2下面3个span平分剩余空间，flex和=3，每个span一份 */
    .box2 span {
        flex: 1;
    }
</style>


<div class="box1">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="box2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

注意：分配剩余空间会使用剩余空间/份数之和，然后根据每个子元素的flex值分给多少份

align-self - 控制子元素自己在侧轴上的排列方式

类似于align-items，如果子元素设置了align-self会覆盖父元素设置给自己的align-items属性

默认值为auto，表示继承父元素的align-items，如果没有父元素，这等于strech（拉伸）

书写方法：align-self: 属性值；

属性值和align-items相同

order - 项目排列顺序

数值越小，排列越靠前，默认为0，如果都没设置，则按照html顺序排序

注意：和z-index不同

书写方法：order: 数字；

想往前提可以设置为负数，往后提属性值比其他要大

<style>
    * {
        margin: 0;
        padding: 0;
        }
    div {
        display: flex;
        width: 500px;
        height: 100px;
        margin: 50px auto;
        background: pink;
    }
    div span {
        width: 100px;
        height: 100px;
        background: skyblue;
    }
    div span:nth-child(2) {
        background: #765987;
    }
    /* 把剩余空间全部分配给第二个span */
    .box1 span:nth-child(2) {
        flex: 1;
        /* 将位置往前提 */
        order: -1;
    }
    /* box2下面3个span平分剩余空间 */
    .box2 span {
        flex: 1;
    }
    .box2 span:nth-child(2) {
        /* 把位置往后拉 */
        order: 1;
    }
</style>

<div class="box1">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="box2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

携程网首页制作（m.ctrip.com）

技术选型

  • 方案：单独制作移动端页面
  • 技术：使用flex弹性布局

准备工作

  • 编写文件结构
  • HTML设置视口、引入CSS文件
  • 设置初始化样式和特殊样式

常见的模块命名方式

B76RAS.png B76g78.png

顶部search-index搜索栏区域

B7gEZV.png

结构分析：

总提结构可以是一个大盒子包裹两个小盒子，左右布局，左侧搜索栏要随着页面的宽度变化，锁业不能设置固定宽度，右侧登录是固定宽高的，可以使用flex布局给左侧搜索框设置flex属性，搜索栏内部因为不属于input标签，可以使用span制作，同样可以使用flex布局

<!-- search-index部分开始 -->
<div class="search-index">
    <!-- 搜索框 -->
    <div class="search">
        <span>搜索:目的地/酒店/景点/航班号</span>
    </div>
    <!-- 登录 -->
    <div class="login">
        <span>我 的</span>
    </div>
</div>
<!-- search-index部分结束 -->

/* 顶部search-index部分 */
/* 大结构flex布局、子元素侧轴居中显示、宽高、CSS3盒子，边距 */
.search-index {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding-left: 12px;
    z-index: 10;
}
/* 搜索栏flex布局、子元素侧轴居中、高度、占满剩余空间、CSS3盒子、边距、圆角、背景色 */
.search-index .search {
    display: flex;
    align-items: center;
    height: 28px;
    flex: 1;
    box-sizing: border-box;
    padding: 2px 5px;
    border-radius: 14px;
    background: #fff;
}
/* 搜索栏文字相对定位、CSS3盒子、高度、边距、文字属性 */
.search-index .search span {
    position: relative;
    box-sizing: border-box;
    height: 18px;
    padding-left: 35px;
    font-size: 15px;
    line-height: 18px;
    color: #666;
}
/* 伪元素制作小图标、转块、绝对定位、宽高、背景 */
.search-index .search span::after {
    display: block;
    position: absolute;
    top: 2px;
    left: 11px;
    content: "";
    width: 14px;
    height: 14px;
    background: url(../images/sprite.png) no-repeat 0 0;
    background-size: 21px 123px;
}
/* 登录模块flex布局、水平垂直居中、宽高、边距、CSS3盒子 */
.search-index .login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 44px;
    box-sizing: border-box;
    padding-right: 5px;
}
/* 登录图标使用伪元素、转块、宽高、背景、调整顺序 */
.search-index .login::after {
    display: block;
    content: "";
    width: 22px;
    height: 22px;
    background: url(../images/sprite.png) no-repeat 0 -36px;
    background-size: 21px 123px;
    order: -1;
}
/* 登录文字属性 */
.search-index .login span {
    font-size: 12px;
    line-height: 12px;
    color: #FFF;
}

常见的flex布局思路（上下排布左右居中对齐）

  1. 先把要放在盒子里的元素放到盒子内部
  2. 设置flex布局
  3. 更改主轴方向为纵向
  4. 设置侧轴居中对齐

焦点图区域

B7549f.png

结构分析：

整体结构不包括上面的搜索框和下面的导航栏部分，使用大盒子包裹两个小盒子实现，一个盒子是后面的大背景，另一个盒子是顶部一个深浅渐变的过渡效果，深浅渐变压盖在背景图之上

<!-- focus部分开始 -->
<header class="focus">
    <a href="javascricp:;"><img src="./images/banner.jpg" alt=""></a>
</header>
<!-- focus部分结束 -->

/* focus区域 */
/* 大结构定位、宽度、左右增加25%边距、下方圆角、左移padding，超出隐藏控制高度 */
.focus {
    position: relative;
    width: 100%;
    padding: 0 25%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    transform: translate(-16.666%);
    overflow: hidden;
}
/* 伪元素添加渐变遮挡。定位、宽高、背景渐变 */
.focus::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom, rgba(0, 0 ,0 ,0.4), rgba(0, 0 , 0, 0));
}
/* a标签转块 */
.focus a {
    display: block;
}
/* img标签宽度、转块 */
.focus a img {
    display: block;
    width: 100%;
}

local-nav区域（导航）

B7bNHe.png

结构分析：

整体大盒子包裹5个小盒子，使用flex布局让小盒子平分剩余空间，小盒子内部再使用flex布局制作

<!-- local-nav部分 -->
<ul class="local-nav">
    <li><a href="javascript:;"><i></i><span>攻略·景点</span></a></li>
    <li><a href="javascript:;"><i></i><span>门票·玩乐</span></a></li>
    <li><a href="javascript:;"><i></i><span>美食林</span></a></li>
    <li><a href="javascript:;"><i></i><span>周边游</span></a></li>
    <li><a href="javascript:;"><i></i><span>一日游</span></a></li>
</ul>
<!-- local-nav部分结束 -->

/* local-nav区域 */
/* 大结构flex布局、定位压盖在上面、高度、CSS3盒子、边距、背景 */
.local-nav {
    display: flex;
    align-items: center;
    position: relative;
    height: 76px;
    box-sizing: border-box;
    margin: -52px 12px 10px;
    padding: 8px 0 4px;
    border-radius: 8px;
    background: #ffffff;
}
/* li标签平分剩余空间 */
.local-nav li {
    flex: 1;
}
/* li下面的a标签flex布局、纵向主轴、侧轴居中 */
.local-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 图标宽高、背景 */
.local-nav li a i {
    width: 40px;
    height: 40px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 40px auto;
}
/* 剩下4个背景 */
.local-nav li:nth-child(2) a i {
    background: url(../images/localnav_bg.png) no-repeat 0 -40px;
    background-size: 40px auto;
}
.local-nav li:nth-child(3) a i {
    background: url(../images/localnav_bg.png) no-repeat 0 -80px;
    background-size: 40px auto;
}
.local-nav li:nth-child(4) a i {
    background: url(../images/localnav_bg.png) no-repeat 0 -120px;
    background-size: 40px auto;
}
.local-nav li:nth-child(5) a i {
    background: url(../images/localnav_bg.png) no-repeat 0 -160px;
    background-size: 40px auto;
}
/* 文字字号 */
.local-nav li a span {
    font-size: 12px;
}

nav区域

BHCOat.png

结构分析：

结构上来说大盒子内部包裹了三行盒子。可以写三行盒子，每行内部还包括水平的盒子可以使用flex布局，可以先设置公共样式，再进行其他私有样式的更改

<!-- nav部分 -->
<nav class="nav">
    <!-- 三行 -->
    <div class="row">
        <a href="javascript:;"><span>酒店</span></a>
        <a href="javascript:;"><span>民宿·客栈</span></a>
        <a href="javascript:;"><span>特价·爆款</span></a>
    </div>
    <div class="row">
        <a href="javascript:;"><span>机票</span></a>
        <a href="javascript:;"><span>火车票</span></a>
        <a href="javascript:;"><span>骑车·船票</span></a>
        <a href="javascript:;"><span>专车·租车</span></a>
    </div>
    <div class="row">
        <a href="javascript:;"><span>旅游</span></a>
        <a href="javascript:;"><span>高铁游</span></a>
        <a href="javascript:;"><span>邮轮游</span></a>
        <a href="javascript:;"><span>定制游</span></a>
    </div>
</nav> 
<!-- nav部分结束 -->

/* nav区域 */
/* 下面是公共样式 */
/* 大结构外边距、圆角、溢出 */
.nav {
    margin: 0 12px;
    border-radius: 8px;
    overflow: hidden;
}
/* 每行flex布局、下边框、背景色 */
.nav .row {
    display: flex;
    border-bottom: 1px solid #fff;
    background-image: linear-gradient(to right, #3478e8, #45ade8);
}
/* 每个a标签转块、边距、左边框、文字属性 */
.nav .row a {
    display: block;
    padding: 25.6px 0;
    border-left: 1px solid #fff;
    color: #fff;
    text-align: center;
}
/* 每行第一个a标签背景图、边距、边框、份数 */
.nav .row a:nth-child(1) {
    padding-left: 12px;
    border-left: 0;
    background: url(../images/flight.png) no-repeat right bottom;
    background-size: auto 34px;
    flex: 1.35;
    text-align: left;
}
/* 每行第二个背景图 */
.nav .row a:nth-child(2) {
    background: url(../images/train.png) no-repeat left bottom;
    background-size: 37px auto;
}
/* 每块文字转块、字号、限制高 */
.nav .row a span {
    display: block;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}
/* 每行除第一个外1份 */
.nav .row a:nth-child(n+2) {
    flex: 1;
}
/* 第三行去除边框 */
.nav .row:nth-child(3) {
    border-bottom: 0;
}
/* 下面设置不同的样式 */
/* 第一行背景 */
.nav .row:nth-child(1) {
    background-image: linear-gradient(to right, #f04045, #f2713f 56%);
}
.nav .row:nth-child(1) a:nth-child(1) {
    background: url(../images/hotel.png) no-repeat right bottom;
    background-size: 73px auto;
}
.nav .row:nth-child(1) a:nth-child(2) {
    background: url(../images/minsu.png) no-repeat left bottom;
    background-size: 37px auto;
}
.nav .row:nth-child(1) a:nth-child(3) {
    flex: 2;
    background-image: url(../images/hot_sale.png), linear-gradient(to right, #f9bc49, #fada52);
    background-size: 161px auto;
    color: #904313;
}
/* 第三行背景 */
.nav .row:nth-child(3) {
    background-image: linear-gradient(to right, #35b899, #5ed146);
}
.nav .row:nth-child(3) a:nth-child(1) {
    background: url(../images/travel.png) no-repeat right bottom;
    background-size: auto 47px;
}
.nav .row:nth-child(3) a:nth-child(2) {
    background: url(../images/dingzhi.png) no-repeat left bottom;
    background-size: 61px auto;
}

subnav-entry部分

BqL8UO.png

**结构分析：**整体和上面导航很类似，只不过是变成了两行，设置一下超出换行即可

<!-- subnav-entry部分 -->
<ul class="subnav-entry">
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
    <li><a href="javascricp:;"><i></i><span>换钞·购物</span></a></li>
</ul>
<!-- subnav-entry部分结束 -->

/* subnav-entry区域 */
/* 大结构边距、flex布局、换行 */
.subnav-entry {
    margin: 0 12px 12px;
    display: flex;
    flex-wrap: wrap;
}
/* 每个块宽度 */
.subnav-entry li {
    width: 20%;
}
/* 每块flex布局、主轴纵向、水平居中、宽度、文字属性 */
.subnav-entry li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
}
/* 小图标转块、宽高、背景 */
.subnav-entry li i {
    display: block;
    width: 28px;
    height: 28px;
    margin: 10px 0 5px;
    background: url(../images/subnav-bg.png) no-repeat 3px -272px; 
    background-size: 24px auto;
}

sales-box部分

Bqxyge.png

**结构分析：**大盒子包裹两个小盒子，上面盒子左右分离可以使用flex布局，下面是两个图片

<!-- sales-box部分 -->
<div class="sales-box">
    <!-- 顶部 -->
    <h2 class="sales-bh">
        <i></i>
        <span>获取更多福利</span>
    </h2>
    <!-- 底部 -->
    <div class="sales-bd">
        <a href="javascript:;"><img src="./images/activity_01.png" alt=""></a>
        <a href="javascript:;"><img src="./images/activity_02.jpg" alt=""></a>
    </div>
</div>
<!-- sales-box部分结束 -->

/* sales-box区域 */
/* 大结构宽度、上边框 */
.sales-box {
    width: 100%;
    border-top: 1px solid #cecece;
}
/* 顶部flex布局、居中、两端对齐、高、边框、文字颜色 */
.sales-box .sales-bh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 0 8px 1px;
    border-bottom: 1px solid #d3d3d3;
    background: #fff;
}
/* 左侧图片 */
.sales-box .sales-bh i {
    position: relative;
    display: block;
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
/* 广告标志 */
.sales-box .sales-bh i::after {
    display: block;
    position: absolute;
    right: -40px;
    content: "";
    width: 36px;
    height: 15px;
    background: url(../images/icon-gg@2x.png) no-repeat 0 0;
    background-size: 36px auto;
}
/* 右侧更多福利 */
.sales-box .sales-bh span {
    display: block;
    position: relative;
    padding: 0 18px 0 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 20px;
    background-image: linear-gradient(to right, #d23e58, #d540b7);
    color: #fff;
}
/* 箭头 */
.sales-box .sales-bh span::before {
    position: absolute;
    right: 10px;
    top: 5px;
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
/* 底部 */
.sales-box .sales-bd {
    display: flex;
    width: 100%;
}
/* a标签 */
.sales-box .sales-bd a {
    display: block;
    position: relative;
    width: 50%;
    border-top: 2px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
}
/* 第一个a边框 */
.sales-box .sales-bd a:nth-child(1) {
    border-right: 1px solid #fafafa;
}
/* 图片宽度 */
.sales-box .sales-bd a img {
    display: block;
    width: 100%;
}
/* 广告标签 */
.sales-box .sales-bd a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 26px;
    border-top-right-radius: 4px;
    content: "广告 ";
    font-size: 12px;
    line-height: 14px;
    background: #b3b3b3;
    color: #fff;
}

footer部分

BLV9BT.png

结构分析：整体分为上下两部分，都可以使用flex布局

<!-- footer部分 -->
<footer class="footer">
    <!-- 顶部 -->
    <div class="footer-top">
        <a><i></i><span>电话预约</span></a>
        <a><i></i><span>下载客户端</span></a>
        <a><i></i><span>我 的</span></a>
    </div>
    <!-- 底部 -->
    <div class="footer-bottom">
        <p>
            <span>网站地图</span><i></i><span>Language</span><i></i><span>电脑版</span>
        </p>
        <p>
            <span>2020携程旅行</span><i></i><span>沪ICP备08023580号</span>
        </p>
    </div>
</footer>
<!-- footer部分结束 -->

/* footer区域 */
/* 大结构 */
.footer {
    width: 100%;
    padding: 1px 0 5px;
}
/* 顶部 */
.footer .footer-top {
    display: flex;
    width: 100%;
    padding-top: 1px;
    margin-bottom: 5px;
    background: #f9f9fb;
}
/* a标签 */
.footer .footer-top a {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 10px 0;
    font-size: 12px;
}
/* 图标 */
.footer .footer-top a i {
    display: block;
    width: 20px;
    height: 20px;
    background: url(../images/phone.png) 0 0;
    background-size: 20px auto;
}

.footer .footer-top a:nth-child(2) i {
    background: url(../images/xiazai.png) 0 0;
    background-size: 20px auto;
}
.footer .footer-top a:nth-child(3) i {
    background: url(../images/wode.png) 0 0;
    background-size: 20px auto;
}
/* 底部 */
.footer .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* 每一行 */
.footer .footer-bottom p {
    display: flex;
    align-items: center;
    color: #606060;
    font-size: 12px;
    line-height: 24px;
}
.footer .footer-bottom p:nth-child(2) {
    color: #909090;
}
/* 分割线 */
.footer .footer-bottom p i {
    width: 1px;
    height: 12px;
    margin: 0 6px;
    background: #8e8e8e;
}
avatar
文章
阅读
粉丝