弹性布局，又称“Flex布局”，是2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 弹性布局通过属性display：flex开启，开启后会使其他的垂直对齐方式失效，元素的float，clear，和vertical-align属性将会失效，子元素默认按照从左至右的顺序排列，且元素之间没有间隙， 弹性布局基本有以下三个规则； 1.弹性布局中，把开启弹性布局的元素称之为“容器”。把弹性布局中的所有子元素称之为“项目”。 2.弹性布局的容器有两根轴，主轴和交叉轴，主轴的方向默认为是水平方向。 3.弹性布局中的项目尺寸，默认情况下（不设置宽高），主轴根据文本大小，交叉轴铺满这个容器。 弹性布局开启后，通过flex-direction改变主轴方向，其属性有： 1.row为默认值，主轴水平方向，从左至右排列。 2.row-reverse主轴水平方向，从右至左。 3.column主轴为垂直方向，从上至下。 4.column-reverse 主轴为垂直方向，从下至上。 弹性布局开启后的主轴对齐方式：justify-content，其属性有： 1.center：居中。 2.flex-start：默认值，对齐开始的位置。 3.flex-end：对齐结束的位置。 4.space-between：两端对齐，项目之间的距离等分，项目与边框之间没有间隙。 5.space-around:分散对齐，项目之间的距离等分，项目与边距之间的间隙是项目之间的一般。 6.space-evenly:分散对齐，项目之间的距离一致。 弹性布局开启后的副轴对齐方式：align-items，其属性有： 1.center:居中 2.flex-start：第一行 3.flex-end：最低端 4.stretch:默认值，若羡慕未设置高度或宽度或者为auto，将占满整个容器（当有固定值时不起作用） 5.baseline:基线对齐
