Flexbox布局有什么特点？

flex布局又称弹性盒子，简单代码量少，可以不用左右浮动了。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：

第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局;

第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间)，从而调整伸缩项目的大小;

第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间;

第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;

第五，可以控制元素在页面上的布局方向;

第六，可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。


猜你喜欢：

弹性布局使用介绍：什么情况下用弹性布局?

什么是页面布局?页面布局有什么原则?

网页一般用什么工具布局?常用的网页流程布局介绍

传智教育前端开发培训课程