参考博客：CSS3新特性：flex
flex是flexible box的缩写，意思是弹性布局。
不过目前浏览器支持不是很好，IE11开始才支持。
各个浏览器的支持情况：
1.flex的盒子
- 紫色的是
flex container，顾名思义就是最大的flex盒子，也就是父元素，css为display: flex。 - 盒子里有一个及以上的
flex item，作为子元素，他们是盒子内的文档流元素，脱离文档流的元素和非子元素都不能算是flex item。 - 盒子里面的子元素横向排列的方向称为
main axis。 - 纵向排列的方向称之为
cross axis。
2. 判断哪些是有效的flex item
主要是两点：【文档流】【子元素】
-
float元素是文档流中的子元素，因此算是 flex item -
position: absolute脱离了文档流，不能算是 flex item -
grandson元素是孙元素，也不能算是 flex item
3. flex弹性布局的特性
主要是三大特性：排列方向、弹性、对齐
- 排列方向
和排列方向有关的属性主要有下面几个flex-direction(弹性方向)、flex-wrap(弹性的换行)、flex-flow(flex-direction和flex-wrap的复合属性)、order(顺序)。
a. flex-direction（默认方向是row）flex-direction: row|row-reverse|column|column-reverse;
b. flex-wrap（默认是nowrap）flex-wrap: nowrap|wrap|wrap-reverse;
c. flex-flow（默认是row nowrap）
flex-flow: flex-direction||flex-wrap;
d. order（默认值为0，值为整数，可为负数）
order: number;
order: 1的元素大于order: 0的两个元素，于是位置就对换了。
- 弹性
和弹性有关的属性有：flex-basis（设置flex-item的初始宽高）、flex-grow、flex-shrink。
a. flex-basis
如果设置为默认值的话，那么如果是flex-basis: number| auto| initial(默认)| inherit;row向排列，那么宽度就是主轴main axis的长度了，如果是column向排列，那么高度就是辅轴cross axis的长度。
b. flex-grow，用来设置弹性盒子的 能分配到的剩余空间 的扩展比率。flex-grow: number;
c. flex-shrink，用来设置弹性盒子的 能分配到的剩余空间 的收缩比率
flex-shrink: number;
d.flex的复合语法flex: flex-grow|| flex-shrink || flex-basis;
【建议使用复合写法，更加的便捷】
- 对齐
和对齐有关的属性：justify-content（设置主轴的对齐方式）、align-items（设置辅轴的对齐方式）、align-self、align-content。
a. justify-contentjustify-content: flex-start| flex-end| center| space-between| space-around;
b. align-items
align-items: flex-start| flex-end| center| baseline| stretch;
或者用这张图理解，
c. align-self（设置单个的flex item在cross axis方向上的对齐）
效果跟align-self: auto| flex-start| flex-end| baseline| stretch;align-items的一样，就不放图了。
d. align-content（设置cross-axis方向上行（多行）的对齐）align-content: auto| flex-start| flex-end| center| space-between| space-around| stretch;
