可以通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，使内容不再受源码顺序的限制。但弹性盒布局只是视觉上的调整，并不会改变屏幕阅读器对内容的读取顺序。它的最大特点就是，能让元素适应不同的屏幕尺寸和不同的显示设备，让内容随可用空间的大小进行尺寸的增减，尤其适用于响应式网站。

　　在元素上声明display：flex或display：inline-flex便可以激活弹性盒布局，这个元素便成为弹性容器，其子元素成为弹性元素。

• display:flex与display:inline-flex的区别：

　　　　display:flex生成的是块级框，若没有设置宽高则默认占满一行；

　　　　display:inline-flex生成的是行内块级框，其宽高会根据里面的弹性元素进行调整；

　　　　如下图所示：

1.设置弹性容器的属性

（1）调整方向

flex-direction属性：（ row[默认]|row-reverse|column|column-reverse）设置弹性容器主轴的方向；

flex-wrap属性：（nowrap[默认]|wrap|wrap-reverse）当弹性容器主轴放不下时，决定元素是否换行以及换行的方向，实际上影响垂轴方向；

上述两个属性可以合并为

flex-flow属性：（row nowrap[初始值]）

（2）调整内容

justify-content属性：设置弹性容器内所有元素在主轴上如何分布；

align-item属性：设置弹性容器内所有元素在垂轴上的对齐方式；

align-self属性：设置单个元素在垂轴上的对齐方式；

align-content属性：当弹性容器允许换行导致有多个弹性元素行时，该属性设置各个弹性元素行的对齐方式；若不允许换行，则用来指明元素从哪个方向溢出；