Flex弹性盒布局以及JS基础

flex布局

          操作方便，布局简单，移动端使用比较广泛。但PC端浏览器支持情况比较差。

flex用到的属性 

1.1、父元素属性

• flex-direction (设置主轴方向)

row   			行排布
row-reverse		同一行反向排布
column			列排布
column-reverse		同一列反向排布

•  justify-content (主轴子元素对齐方式)

flex-start  		从头部排列
flex-end		从尾部排列
center			居中排列
space-around		平分剩余
space-between		两边贴边，平分剩余

• align-items (侧轴单行子元素的对齐方式)

flex-start		从上到下
flex-end		从下到上
stretch			拉伸（子元素去掉高度）
center			居中

• align-content (侧轴多行子元素的对齐方式)

flex-start		侧轴头部排列
flex-end		侧轴尾部排列
center			居中排列
space-around	        侧轴平分空间
space-between	        两侧贴边，平分剩余空间

• flex-wrap (子元素是否换行)

wrap