flex布局

flex的出现是为了解决float

 一.flex的四大概念

1.容器

如果在一个盒子上面设置了display：flex，那么这个盒子就是一个容器

2.项目

容器的直接子元素就是项目。

3.主轴

在容器中，项目默认是主轴的方向排列，默认方向是从左到右排列。

4.交叉轴

就是与主轴垂直的那个轴。

二：flex对子元素造成的影响

1.容器中的项目都是块级元素

span原本是女标签，但是由于它的父元素变成了flex，所以他自己变成了块级元素、

小结：有三种情况，会把一个元素悄悄地改成block

1. Float.把自己改成block
2. Position:absolute/fixed 把自己改成block
3. Display:flex。把子元素改成block

2. 在容器中，浮动是失效的

3. 没有margin重叠

加上flex：

4.换行不是由display：block决定的

与容器相关的属性

1. flex-direction：改变主轴的方向，其后面可以跟row  column  row-reverse  column-reverse
2. flex-wrap：项目足够多的时候，是否换行      wrap /换行   nowrap/不换行
3. flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4. justify-content：处理富余空间 ： flex-start   flex-end     center    space-between                                                               space-around
5. align-items：定义项目在交叉轴上如何对齐 ：flex-start    flex-end   center
6. align-content：当有多根主轴时，多根主轴的对齐方式，相当于处理垂直方向上的富余空                            间。

三 .与项目相关的属性

1. order ：用来改变项目的顺序的
2. flex-grow：让某个项目生长
3. flex-shrink：让某个项目压缩
4. flex-basis：项目在主轴上占据的大小

****flex    是上面几个属性的简写方式

关于浮动最经典的案例--------色子案例 

具体详解 参考：

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html