Css3布局：flex

• 弹性布局，可以让盒子并排显示，并且可以使行内元素转换为行内块级元素
• 父盒子设为flex布局以后,子元素的float,clear和vertical-align属性将失效

父元素添加的属性

flex-direction: 设置主轴方向;

  flex-direction: row; 
  默认值。从左到右 
  flex-direction: row-reverse; 
  与 row 相同，从右到左
  flex-direction: column; 
  从上往下 
  flex-direction: column-reverse; 
  从下往上 
  flex-direction: initial; 
  设置该属性为它的默认值。请参阅 initial。 
  flex-direction: inherit; 
  从父元素继承该属性。请参阅 inherit。 

justify-content: 设置主轴上的元素排列方式;

   justify-content: center; 
   居中排列 
   justify-content: start; 
   从行首开始排列 
   justify-content: end; 
   从行尾开始排列 
   justify-content: flex-start; 
   从行首起始位置开始排列 
   justify-content: flex-end; 
   从行尾位置开始排列 
   justify-content: left; 
   一个挨一个在对齐容器得左边缘 
   justify-content: right; 
   元素以容器右边缘为基准，一个挨着一个对齐, 

   基线对齐 
   justify-content: baseline; 
   justify-content: first baseline; 
   justify-content: last baseline; 

   分配弹性元素方式 
   justify-content: space-between; 
   均匀排列每个元素
   首个元素放置于起点，末尾元素放置于终点 
   justify-content: space-around; 
   均匀排列每个元素
   每个元素周围分配相同的空间 
   justify-content: space-evenly; 
   均匀排列每个元素
   每个元素之间的间隔相等 
   justify-content: stretch; 
   均匀排列每个元素
   'auto'-sized 的元素会被拉伸以适应容器的大小 

   溢出对齐方式 
   justify-content: safe center; 
   justify-content: unsafe center; 

   全局值 
   justify-content: inherit; 
   justify-content: initial; 
   justify-content: unset; 

flex-wrap: 设置元素是否换行;

    flex-wrap: nowrap; 
    默认值。不换行。 
    flex-wrap: wrap; 
    换行。 
    flex-wrap: wrap-reverse; 
    换行，但是以相反的顺序。 
    flex-wrap: initial; 
    设置该属性为它的默认值。请参阅 initial。 
    flex-wrap: inherit; 
    从父元素继承该属性。请参阅 inherit。

align-content: 设置侧轴上的子元素的排列方式（多行）;

    align-content: stretch; 
    设置子项元素高度平分父元素高度 
    align-content: center; 
    在侧轴中间显示 
    align-content: flex-start; 
    在侧轴的头部开始排列 
    align-content: flex-end; 
    在侧轴的尾部开始排列 
    align-content: space-between; 
    子项在侧轴先分布在两头，再平分剩余空间 
    align-content: space-around; 
    子项在侧轴平分剩余空间 

align-items: 设置侧轴上的子元素的排列方式（单行）;

    align-items: stretch;
    默认值。元素被拉伸以适应容器。
    子元素不要设置高度
    align-items: center;
    挤在一起居中（垂直居中）。
    align-items: flex-start;
    从上到下
    align-items: flex-end;
    从下到上
    align-items: baseline;
    元素位于容器的基线上。
    如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。
    其它情况下，该值将参与基线对齐。

flex-flow: 复合属性，相当于同时设置了flex-direction和 flex-wrap;

   flex-direction: column;
   flex-wrap: wrap; 

   flex-flow: column wrap; 
   flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。 

   可以单独写一个，也可以两个一起写 
   flex-flow: column-reverse; 

子元素添加的属性

order：子元素出现的顺序

    order:numbre
    值越大 越约靠后

align-self：控制子项自己在侧轴上的排列

    align-self:stretch
    拉伸当对应的宽或者高没写的时候 会占满侧轴（默认值）
    align-self:flex-start
    顶端对齐 最上面
    align-self:center 
    中间对齐。
    align-self:flex-end 
    尾端对齐
    align-self:baseline
    按照里面内容的基线对齐

flex-grow：子元素拓展比例，用于分配剩余空间

   flex-grow:0
   默认值 
   flex-grow:1
   自然数

flex-shrink：子元素缩小比例，用于分配剩余空间

   flex-shrink:1
   收缩（默认值）
   flex-shrink:0
   不收缩

flex-basis:元素在分配剩余空间之前的默认大小

   flex-basis:auto
   默认值是auto，即自动。如果有设置width，占用空间就是width。如果没有设置，按照内容宽度。若同时设置width和flex-basis，则在渲染性能方面，将忽略width
   flex-basis:1%
   任意数字+任意长度单位;

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

   其中第一个必填，后面两个可省略。
   flex: 1 1 auto 
   flex: 0 1 auto （默认值）