flex布局介绍
行内布局
― 为了呈现文本而设计出来的布局模式。表格布局
― 为了用格子呈现 2D 数据而设计出来的布局模式。定位布局
― 为了非常直接地定位元素而设计出来的布局模式,定位元素基本与其他元素毫无关系。
模块(目前为 W3C —— 候选推荐规范)致力于提供一种更高效的布局方式,即便子项尺寸未知(或动态)的情况下,对齐、分布容器子项之间的空间,因此谓之flex
。
弹性布局背后的主要思想是让容器能够改变子项的宽、高以及顺序,以最合适的方式填充可用空间(以适应各种显示设备和屏幕尺寸)。弹性容器扩展子项以填充可用空间,或者收缩子项防止溢出。
注:Flexbox 布局非常适合组织应用组件和小型布局,而 Grid 布局则为大型应用布局设计。
在CSS3中,引入了新的布局模式:flex布局
,即弹性盒子布局,是为了呈现复杂的应用与页面而设计出来的。
一个flex容器
的内容:
- 可以在样式层(也就是视觉顺序可以跟源码、语音顺序无关)调换、重排显示顺序
- 可以沿着单一(主)轴线性配置或是沿着第二(侧)轴折行
- 可以因为可用空间的存在扩展内容的尺寸
- 可以在保持侧轴长度不变之下动态折叠或反折叠