弹性盒布局
作者：互联网
可以通过弹性盒指明空间的分布方式、内容的对齐方式和元素的视觉顺序，使内容不再受源码顺序的限制。但弹性盒布局只是视觉上的调整，并不会改变屏幕阅读器对内容的读取顺序。它的最大特点就是，能让元素适应不同的屏幕尺寸和不同的显示设备，让内容随可用空间的大小进行尺寸的增减，尤其适用于响应式网站。
在元素上声明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属性：当弹性容器允许换行导致有多个弹性元素行时，该属性设置各个弹性元素行的对齐方式；若不允许换行，则用来指明元素从哪个方向溢出；
标签：flex,元素,容器,布局,弹性,display,属性 来源： https://www.cnblogs.com/evil-shark/p/16064611.html