CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。
参考
CSS 属性
指南
- 使用 CSS 弹性盒子
- 循序渐进的讲解如何用此特性来建立布局。
- 用弹性盒子进行 Web 应用布局
- 讲解在 Web 应用的特定环境下如何应用弹性盒子。
规范
规范 | 状态 | 注解 |
---|---|---|
CSS Flexible Box Layout Module | Candidate Recommendation | 初始定义。 |
浏览器兼容性
特性 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基础支持 | 20.0 (20.0) | 21.0-webkit 29.0 |
10.0-ms 11.0 |
12.10 | 6.1-webkit |
特性 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基础支持 | (Yes) | 4.4 | 11 | 12.10 | 7.1-webkit |