CSS3彈性伸縮布局簡介

2009年，W3C提出了一種嶄新的方案----Flex布局（即彈性伸縮布局），它可以簡便、完整、響應式地實現各種頁面布局，包括一直讓人很頭疼的垂直水平居中也變得很簡單地就迎刃而解了。但是這個布局方式還處于W3C的草案階段，并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。其中混合過渡版本主要是針對IE10做了兼容。目前flex布局用得比較多的還是在移動端的布局，所以本次主要講解一下舊版本和新版本在移動端使用的各個知識點，讓大家對神秘的flex布局熟悉起來。

舊版本（box）

首先看一下瀏覽器兼容情況：

PS：瀏覽器兼容數據不一定很準確，不過相差不大。

下面將通過一個簡單的實例來講解舊版本的各個屬性：

html代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表