弹性盒子，为父容器指定为弹性盒子，设置display:flex，注意如果是webkit内核的，要加上前缀-webkit，即是display:-webkit-flex;

如果是行内元素，设置为display:inline-flex;

父容器拥有的属性：

1.flex-direction   决定盒子的主轴方向，默认自左向右是主轴，自上向下是纵轴。

      flex-dericttion:row;主轴是自左向右

      flex-deriction:row-reverse主轴是自右向左

     flex-deriction:column 主轴是自上向下

     flex-deriction:column 主轴是自下向上

2.flex-wrap  是否换行，默认是nowrap，不换行

     flex-wrap:nowrap  不换行

    flex-wrap:wrap  换行

    flex-wrap:wrap-reverse  换行，第一行在下面，第二行在上面

3.justify-content  定义条目在主轴上的排列方式

     justify-content:flex-start  默认  左对齐

    justify-content:flex-end  右对齐

    jusitify-content:center   居中

   jusitify-content:space-between 两端对齐

   jusitify-content:space-around   每个条目的两边空隙相等

4.align-item  定义定义条目在纵轴上的排列方式

   align-item:flex-start  顶部对齐

   align-item:flex-end   底部对齐

  align-item:center    居中对齐

  align-item:strecth    如果条目不设置高度，则沾满父容器的高度

  align-item:baseline 以条目的第一行文字为基线对准

总结：上面列出的是常用的父容器属性，设定主轴方向，条目对齐在主轴上的对齐方式，是否换行，条目在纵轴的对齐方式。

下面是给子容器设置的属性：

1.order  子元素的排列先后，数字越小，越靠前

2.flex-grow 子元素的放大比例

3.flex-shrink 子元素的缩小比例

给子元素设置属性常用的是这三个。