CSS3 在布局方面做了非常大的改进，对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开发中可以发挥极大的作用。（兼容性不好）

必要元素：

     指定一个盒子为伸缩盒子 display:flex;

　　设置属性来调整此盒子的子元素的布局方式：如 flex-direction；

　　明确主侧轴及方向

　　可互换主侧轴，也可改变方向

各属性：

a)  flex-direction：row（默认属性）

b)  flex-direction：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

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: stretch

flex-start      ／    flex-end  ／ center     ／ stretch

   侧轴起始点对齐／终止点对齐／居中对齐／拉伸

.order li:nth-child(2) {

                                          order: 10;   // 让其位置在第十位

}

使用web字体

　　@font-face{ 　　　　font-family："webfont";  /*定义的字体名字*/ 　　　　src:url ("       路径"); 　　　　src:url("字体路径") format();/*format（）函数给浏览器提示是该字体文件是何种类型*/ 　   }　   .web-font{           font-family:'webfont'; /*定义字体名字*/ 　    }

　　 .icon::before{ 　　    content: '\e655';     　　font-family: iconfont; 　　}

b)    在伪元素添加的时候content=“\e67c”

鼠标滚轮事件

作者:明明 出处: http://www.cnblogs.com/mingm/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意，必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。