display：flex属性

flex（flexible box）弹性布局，设置此属性后，子元素的float，clear，vertical-align属性失效。可以应用于容器或者行内元素。
容器中的6个属性：

（1）flex-direction：容器中项目的排列方向（默认为横向）

可以取值为：row /row-reverse /column /column-reverse

（2）flex-wrap：容器内项目换行方式（默认不换行）

可以取值为：nowrap /wrap /wrap-reserve

（3）flex-flow：flex-direction与flex-wrap的复合属性

（4）justify-content：项目在主轴（横轴）上的对齐方式

可以取值为：

• flex-start（主轴上从左或者从上开始排列）
• flex-end（主轴上从右或者下开始排列）
• center（主轴中间开始排列）
• space-between（主轴上左右两端或者上下两端开始排列）
• space-around（项目之间的间隔是项目与边框之间的间隔的两倍）

（5）align-items：定义flex子项在flex容器的当前行的纵轴方向上的对齐方式

可以取值为：stretch

center

flex-start

flex-end

baseline（根据基线排列）

（6）align-content

可以取值为：stretch

center

flex-start

flex-end

space-between

space-around