# 弹性盒模型
# 前言
对于页面布局,常见布局模式:有块布局,行内布局,表格布局,定位布局,对于定位布局不太灵活,会破坏文档流,浮动布局又常常会带来一些问题,同样会破坏文档流,不灵活,那么 CSS3 引入了布局模式Flexbox布局
主要作用: 让容器盒子有能力让它的子项能够改变其宽度,高度,甚至顺序,以最佳的方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)
Flex 容器会使子项目(伸缩项目)拓展来填满可用空间,或缩小它们以防止溢出容器
# 弹性盒模型
Flexbox布局对于涉及自适应的页面非常有用,可以实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变
同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,可以调节伸缩项目的相对大小和位置
可以确保伸缩容器中的多余空间平均分配多个伸缩项目
如果伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器
# Flexbox 布局特点
- 屏幕和浏览器窗口大小发生改变也可以灵活的调整布局
- 指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小
- 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前,之后或之间
- 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围
- 控制元素在页面上布局方向
- 按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序,也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序
