淺談css3彈性盒子模型

標籤：code   開始   而不是   eve   .com   問題   自動   doc   mozilla   

昨晚聽了一個小程式的公開課，在布局時，無意間看到了彈性盒子的身影，之前只知道box-flex,但是由於相容性問題，使用者很少，畢竟市面上的大多瀏覽器都必須加首碼才能實現，也就意味著多寫幾行代碼，其實這都不是事，可是大部分CXY都比較懶，能一行代碼搞定的事絕不寫兩行。廢話有點多了。轉回正題。

我學東西遵循著，是什嗎？為什嗎？怎麼用？有什麼問題？下面我就按這四個方向深入聊聊，水平有限，有問題的地方請多多指教。。

一、是什嗎？

相信大多數CXY遇到問題，不知是騾子還是馬，都會習慣性Google之，我也不例外，真是不穀不知道，一穀嚇一跳。倒不是該屬性本身，而是此屬性作為導火索，讓我瞭解了下CSS3中新的盒子模型——彈性盒子模型(Flexible Box Model)。對於我這樣的流體布局控而言，這種盒子模型的出現就好比打麻將杠上開花杠到絕張邊七條，讓人興奮不已。在國外，彈性盒子模型早在09年就開始被提及，研究，與應用。

css3的彈性盒模型是一個可以讓你告別浮動、完美實現垂直水平置中的新特性。Flexbox是布局模組，而不是一個簡單的屬性，它包含父元素和子項目的屬性。Flexbox布局的主體思想是似的元素可以改變大小以適應可用空間，當可用空間變大，Flex元素將伸展大小以填充可用空間，當Flex元素超出可用空間時將自動縮小。總之，Flex元素是可以讓你的布局根據瀏覽器的大小變化進行自動調整。

 

二、為什嗎？

上面提到過，布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊布局非常不方便，比如，垂直置中就不容易實現。

 

--先吃飯，再繼續

淺談css3彈性盒子模型