弹性布局（flex布局）

display: flex;

父

flex-direction: row：设置子元素排列的方向 row-水平 column-垂直

flex-wrap: wrap：设置水平方向行末是否断行

flex-flow：是flex-direction和flex-wrap的集合  如：flex-flow：row wrap;

justify-content: space-between：设置子元素在水平方向上的排列方式，flex-start：居左（默认） flex-end：居右 center：居中;space-around：所有子元素平分间隔，并且两边空余一条间距;space-between：所有子元素平分间隔，两边不留空。

align-items:center：设置子元素在垂直方向上的排列方式，flex-start：居上（默认） flex-end：居下 center：居中。

align-content: center：对于多行子元素 ，设置子元素在垂直方向上的排列方式，flex-start：居上（默认） flex-end：居下 center：居中。

子

flex-grow:1：当父容器宽度过大的时候,子元素是否拉伸 0-不拉伸(默认)
flex-shrink:0：当父容器宽度不够的时候，子容器是否压缩 0-不压缩

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self: center：设置某个子元素的垂直排列方式

order:6：子元素在水平方向的排列顺序,默认都是0