CSS 3 之Flex布局（弹性布局）

flex布局又叫弹性布局

属性为 display:flex;

设置了该属性元素即为弹性盒子，内部元素的排列会依据主轴的方向进行排列，一般默认情况下X轴为主轴，y轴为交叉轴。

弹性盒子的容器属性

1. flex-direction            设置主轴的对齐方向  

2. row	默认值，横向左对齐（从左到右）
   column	纵向
   row-reverse	反转横向（从右到左，右对齐）
   column-reverse	反转纵向

3. flex-wrap                  设置子元素的换行方式

4. wrap	多行（溢出换行）
   nowrap	默认值，单行（不换行）
   wrap-reverse	反转wrap多行排列

5. justify-content           项目（子元素）在主轴上的对齐方式

6. center	居中
   flex-start	默认值，左对齐
   flex-end	右对齐
   space-around	每个项目两侧间距相等，项目之间的间距比项目与边框的间距大
   space-between	两端对齐

7. align-items                项目（子元素）在交叉轴上的对齐方式

8. center	中点对齐
   flex-start	起点对齐
   flex-end	终点对齐
   baseline	项目的第一行文字的基线对齐
   stretch	默认值，如果项目未设置高度或设为auto，将占满整个容器高度

9. flex-flow                    多个属性的简写模式，可同时设置主轴对齐方向和换行方式
   align-content             多跟轴线的对齐方式
   弹性盒子的项目属性（子元素属性）

   order      项目的排列顺序，数值越小越靠前，默认为0
   flex-grow      项目的放大比例，默认为0【flex-grow:9999999;     成长比无限大】
   flex-shrink     项目的缩小比例，默认为1，一般取值0或1，0即为不缩小，空间不足时，项目缩小
   object-fit:cover;         此属性可防止图片由于比例放大导致失真