flex布局

flex布局就是弹性布局，多用于移动端，因为兼容问题，对ie11以下版本不兼容，所以如果pc端的需要兼容的浏览器比较多，flex布局有局限，但是在移动端，大部分都可以兼容。

flex布局父项常见属性，以下六个

1，flex-direction:设置主轴方向（row,row-reverse,column,column-reverse）

2.justify-content:设置主轴上的子元素排列方式(flex-start,flex-end,center,space-around,space-between),先确定主轴方向，然后再设置个属性。

3.flex-wrap：设置了元素是否换行（默认不换行，如果装不开，就会缩小子元素的大小）（wrap，nowrap）

4.align-content：设置侧轴上的子元素的排列方式（使用flex-wrap换行过的多行)（flex-start,flex-end,center,space-around,space-between,stretch(设置子元素高度平分父元素高度)）

5.align-items：设置侧轴上的子元素排列方式（单行）（flex-start,flex-end（从下到上）,center,stretch(拉伸)）

6.flex-flow:符合属性，相当于同时设置了flex-direction和flex-wrap (flex-flow:column wrap)

 

flex布局子项常见属性

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

2.align-self控制子项自己在侧轴上的排列方式，可覆盖align-items属性，默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

3.order，子元素的排列顺序，默认是0，如果是-1，则排列在它前面的兄弟元素的前面。