flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何元素都可以设置为flex布局。设置为flex布局的元素，称为flex容器（flex container），简称容器；它的所有子元素自动成为容器成员，称为flex项目（flex item），简称项目。
容器默认存在两根轴：水平的主轴（main axis）和与其垂直的交叉轴（cross axis），项目默认沿主轴排列。
注意设置为flex布局以后，子元素的float、clear和vertical-align属性全部失效。
-
容器属性
- flex-direction属性：设置主轴的方向。
- justify-content属性：设置主轴上项目的排列方式。
- flex-wrap属性：决定如果项目在一条轴线排不下，是否换行。
- flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式。默认为row nowrap。
- align-items属性：设置单行项目在侧轴上如何对齐。
- align-content属性：设置多行项目在侧轴的对齐方式。如果项目只有一根轴线，该属性不起作用。
-
项目属性
- order属性：设置项目的排列顺序，数值越小，排列越靠前。默认为0。
- flex-grow属性：设置项目的放大比例。默认为0，即如果存在剩余空间也不放大。
- flex-shrink属性：设置项目的缩小比例。默认为1，即如果空间不足时候将等比例缩小。不能为负值。
- flex-basis属性：设置在分配多余空间之前，项目占据的初始主轴空间（所谓的初始主轴空间就是元素在flex-grow属性和flex-shrink属性生效前的主轴空间）。默认为auto，即项目的本来大小。浏览器根据这个属性，计算主轴是否有多余空间。
- flex属性：是flex-grow属性、flex-shrink属性和flex-basis属性的简写。默认为0 1 auto。
- align-self属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
拓展：
flex: 1等价于flex: 1 1 0%
flex: 1和flex: auto的区别，可以归结于flex-basis: 0和flex-basis: auto的区别。当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑元素尺寸；当设置为auto时（相对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候需要考虑元素尺寸。
