Flexible Box是什么？Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型——伸縮盒模型。由CSS3規范提出，這是在原有的大家非常熟悉的block, inline-block, inline的基礎上延伸出的新一代布局模式。
瀏覽器兼容性

作為非常現實的開發者，是否對一個新技術進行關注，首先要考慮它的瀏覽器兼容性如何。我們的伸縮盒模型的瀏覽器兼容性看起來還是相當不錯的。

可以看到，現代瀏覽器基本上都支持了，IE10開始也支持了（IE和Safari分別加-ms-和-webkit-前綴即可），移動端的支持情況也比較良好，唯一不支持的平臺只有Opera了，咱不帶他玩→_→

因此，奧巴馬同志說：伸縮盒模型是好的，有前途的。（嗯嗯~）
伸縮盒基本概念

伸縮盒的最大特點或者說優點就在于它考慮到了現今高昂的房價和人民日益增長的住宅需求之間的矛盾，房屋面積是有限的，但是我們的伸縮盒能夠最合理最高效地把房子分給大家。面積多了，就給大家伙多分點；面積小了，就讓各位擠一擠少分點，總而言之不會讓任何一個人露宿街頭的（overflow）！

既然我們提到了房子和住戶的關系，那么住戶的排列自然需要沿一定的方向。對于塊級元素來說，布局的延伸方向是自上而下的，也就是縱向。而對于行內元素來說，布局延伸方向是自左往右的，也就是橫向。而伸縮盒呢，它的方向是可變的，既能縱向延伸，也能橫向舒展，這取決于你的設置了。
伸縮盒模型基本術語

伸縮盒模型的思想和普通的塊級元素和行內元素的布局思想有較大的不同，它引入了一些新的概念和術語，通過下面這張圖來了解一下：

Flex container 伸縮盒容器
這就是用來分的房子，這是一間神奇的房子，要讓它變得神奇，將display屬性聲明為flex或inline-flex即可~

Flex item 伸縮項
房子里的居民，他們都會占有自己應得的住房面積。

為了形象說明，我們用代碼來解釋。

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