CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

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”

鼠标滚轮事件

　　window.onmousewheel=function（）｛｝