弹性盒子，为父容器指定为弹性盒子，设置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 子元素的缩小比例
给子元素设置属性常用的是这三个。