相较于浮动布局，弹性盒子是一种新的布局方式，任何一个容器都是可以设置为弹性盒子的，主要用于移动端。让容器能够控制子元素的排列。在弹性盒子flex中浮动float，清除浮动clear以及vertical-align属性都将失去效果。
弹性盒子的设置 display:flex;
容器上的属性
设置主轴的方向
flex-direction:row | column;
row是横着排列，默认值
column是竖着排列
项目是否换行
flex-wrap:nowrap | wrap;
noerap是不换行，默认值
wrap是换行
主轴上的对齐方式
justify-content:center | space-between |space-around | space-evenly
center 居中
space-between 间隔在项目之间
space-around 间隔在项目周围【项目与项目之间的间隔是项目与容器间隔的两倍】
space-evenly 间隔均分
侧轴上的对齐方式
align-items:center | baseline;
center 居中
baseline基线对齐
多跟轴线的对齐方式
align-content:center | space-between |space-around | space-evenly
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 100px auto; //设置盒子wrap的位置
display: flex; //设置为弹性盒子
justify-content: center; //将子元素设置为主轴方向居中
align-items: center; //将子元素设置为侧轴居中
}
.wrap>div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
</div>
</body>
</html>字体图标
一般使用的是阿里的字体图标库https://www.iconfont.cn/ 都是免费的
在图表库里面找到相应的图标然后加入购物车下载就行，选图标时尽量选用没用颜色的图标，这样我们对于字体图标的颜色好更改。有一些有颜色的字体图标是无法更改颜色样式的。
字体图标的引入方式
一般我们是引入下载好的字体图标的css文件
<!-- 引入字体图标样式 icon font.css -->
<link rel="stylesheet" href="font/iconfont.css">
<body>
<span class="iconfont icon-字体图标名字"></span>
</body>