CSS3弹性布局

在更新到如今相对稳定的版本之前,Flexbox 经过了3次重大的迭代。从2009 年版(https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)到2011年版(https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/),再到2014年版(https://www.w3.org/TR/css-flexbox-1/)。前后语法变化之大非常明显。这几个不同版本的规范对应着不同的实现。需要关注哪些版本,取决于需要支持的浏览器。

首先明确:IE9及以下版本不支持Flexbox。对于其他浏览器(包括所有移动端浏览器),有方法可以享受Flexbox的绝大多数特性,具体支持信息可以访问http://caniuse.com/进行查询。

简单比较Flexbox版本如下:

2020-12-22

基础知识 浏览器的支持 Flexbox伸缩布局新旧版本语法比较 CSS3显示类型 CSS3布局类型 Flexbox系统概述 媒体特性 应用技巧 创建可伸缩图像 创建弹性布局 案例实战 设计3栏页面 设计3行3列应用