flex布局

一、flex布局和传统布局的比较

1，传统布局的兼容性好

2，传统布局的布局繁琐且不能在移动端很好的布局，flex则很简单且在移动端应用很广泛

二、flex布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

1，当父盒子设为flex布局以后，子元素的float、clear和vertical-alien属性失效

2，伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局

三、常见父项属性

1、flex-direction：设置主轴的方向

row默认从左到右，colum默认从上到下。

如：flex-direction:row;

2、justify-content：设置主轴上的子元素排列方式

justify-content:flex-start;默认从头开始

justify-content:flex-end;从尾部开始

justify-content:center;在主轴居中对齐

justify-content:space-between;先两边贴边，再平分剩余空间 

justify-content:space-around;平分剩余空间

3、flex-wrap：设置主元素是否换行

nowrap，默认值，不换行

wrap，换行

4、align-content：设置侧轴上的子元素排列方式（多行）

flex-start，默认值，在侧轴的头部开始排列

flex-end，在侧轴的尾部开始排列

center，在侧轴的中间显示

stretch，设置子元素高度平分父元素高度

space-between，子项在侧轴先分布在两头，再平分剩余空间

space-around，子项在侧轴平分剩余空间

5、align-items：设置侧轴上的子元素排列方式（单行）

flex-start，默认值，从上到下

flex-end，从下到上

center，挤在一起居中

stretch，拉伸

6、flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

三、子项常见属性

flex属性：定义子项目分配剩余空间，用flex来表示占多少份数