直接參考:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
CSS3中引入了一種新的布局模式——Flexbox布局逼蒙,即伸縮布局盒模型(Flexible Box?),用來提供一個更加有效的方式制定从绘、調(diào)整和分布一個容器里項目布局,即使它們的大小是未知或者動態(tài)的是牢,這里簡稱Flex僵井。
Flexbox布局常用語涉及比較復(fù)雜的頁面,可以輕松地實現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時保持元素的相對大小和位置不變妖泄,同時減少了依賴于浮動布局實現(xiàn)元素位置的定義以及重置元素的大小驹沿。
Flex布局在定義伸縮項目大小時伸縮容器會預(yù)留一些可用空間,讓你可以調(diào)節(jié)伸縮項目的相對大小和位置蹈胡。例如渊季,你可以確保伸縮容器的多余空間平均分配給多個伸縮項目,當(dāng)然罚渐,如果你的伸縮容器沒有足夠大的空間放置伸縮項目時却汉,瀏覽器會根據(jù)一定的比例減少伸縮項目的大小,使其不溢出伸縮容器荷并。綜合而言合砂,F(xiàn)lexbox布局功能主要具有以下幾點:
第一:屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局;
第二:可以指定伸縮項目沿著主軸或側(cè)軸按比例分配額外空間(伸縮容器額外空間)源织,從而調(diào)整伸縮項目的大恤嫖薄;
第三:可以指定伸縮項目沿著主軸或者側(cè)軸將伸縮容器額外空間谈息,分配到伸縮項目之前缘屹、之后或之間;
第四侠仇,可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍轻姿;
第五:可以控制元素在頁面上的布局方向犁珠;
第六,可以按照不同于文檔對象模型(DOM)所指定排序方式對屏幕上的元素重新排序互亮。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序犁享。