CSS3 在布局方面做了非常大的改进，对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开发中可以发挥极大的作用。（兼容性不好）
必要元素：
指定一个盒子为伸缩盒子 display:flex;
设置属性来调整此盒子的子元素的布局方式：如 flex-direction；
明确主侧轴及方向
可互换主侧轴，也可改变方向
各属性：
设置主轴方向
a) flex-direction：row（默认属性）
- row：从左往右
b) flex-direction：row-reverse
- row-reverse从右向左排列
c) flex-direction：column
- 竖直反向，从上往下
d) flex-direction：column-reverse
1. 竖直方向，从下往上
主轴的对齐方式
a) justify-content：flex-start；
- 从主轴开始的方向对齐
b) justify-content：flex-end
- 从主轴结束的方向对齐
c) justify-content：center
- 居中对齐（水平/竖直）
d) justify-content：space-round
- 平分父盒子空间
e) justify-content：space-between
1. 两端对齐，中间平分
侧轴对齐方式
a) align-items：flex-start
- 从侧轴开始的方向对齐
b) align-items：flex-end
- 从侧轴结束的方向对齐
c) align-items：center
- 在侧轴方向上居中
d) align-items：baseline
- 基线对齐，与flex-start等效
e) align-items：stretch
- 拉伸，和父盒子高度一样
- 有高度不会被拉伸
伸缩比例
a) flex：number
b) 不设置就不参与平分
元素换行
a) flex-wrap:wrap; 换行，控制伸缩盒子里面的元素
b) flex-wrap：nowrap； 默认不换行 会自动缩减宽度
控制 换行 堆叠的元素
a) align-content: flex-start
起始点对齐 各行向弹性盒容器的起始位置堆叠
b) align-content: flex-end;
终止点对齐 将结尾铺满 开头空着
c) align-content: center ;
居中对齐，各个盒子向弹性盒容器的中间位置堆叠／y轴中间
d) align-contnt: space-around;
四周环绕：各行在弹性盒容器中平均分布
e) align-content: space-between;
顶端和底部对齐，中间部分为空
f) align-content: stretch ;
拉伸 高度会自适应
align-self; 覆盖父元素设置的align-items
align-self: stretch
flex-start ／ flex-end ／ center ／ stretch
侧轴起始点对齐／终止点对齐／居中对齐／拉伸
order：number ； 控制子元素的顺序
.order li:nth-child(2) {
order: 10; // 让其位置在第十位
}
WEB字体
- 可以使用自己指定的特殊字体，无需考虑用户是否安装
- 支持程度较好
- .eot字体是IE专用字体
使用web字体
声明字体
@font-face{
font-family："webfont"; /*定义的字体名字*/
src:url (" 路径");
src:url("字体路径") format();/*format（）函数给浏览器提示是该字体文件是何种类型*/
}
.web-font{
font-family:'webfont'; /*定义字体名字*/
}
伪元素添加图标字体 (给那个标签添加icon类名那个标签就会有这个图标)
.icon::before{
content: 'e655';
font-family: iconfont;
}
b)  在伪元素添加的时候content=“e67c”
鼠标滚轮事件