display:flex布局

　　dispaly:flex  主要用于容器中，也可以用在行内元素，可以响应式的实现页面布局

　　　为盒子设置Flex布局之后，子元素的float, clear vertical-align属性会失效

 　　flex的6个属性 

• flex-direction可以让容器内元素的排列方向是横向的.

1. flex-direction:row；水平从左到右排列
2. flex-direction:row-reverse,水平从右往左排列
3. flex-direction:column;垂直沿主轴从上向下垂直排列

• flex-wrap容器内元素是否换行（默认不换行）

1. flex-wrap:nowrap(默认):一行水平均匀分布
2. flex-wrap:wrap，盒子内第一个元素占第一行，那第二个就占第二行，还可以根据子元素的宽度决定一行几个

• just-content元素在主轴上的排列

1. justify-content:center；元素在主轴居中排列
2. justify-content:flex-start；如果是水平排列元素在主轴上从左到右，垂直排列从上到下
3. justify-content:flex-end;如果是水平排列元素在主轴上从右到左，垂直排列从下到上
4. justify-content:space-between.在左右两端或者上下两端，均匀排列
5. justify-contnt:space-around.每个元素左右两侧间距相等，元素之间的监狱比边框之间的间距大一倍

• align-item元素在主轴当前行的对齐方式

1. align-item:flex-start:紧靠父容器的上测
2. align-item:flex-end:紧靠父容器的下侧
3. align-item:center:父容器的侧轴居中放置

• align-conent容器内的元素没有占用交叉轴上所有可用的空间时，垂直对齐容器内的各项