# Flex 布局是什么? [TOC] ## Flex 簡介 * Flex 是 **Flexible Box**的縮寫, 意思是"**彈性布局**", 用來為盒狀模型提供最大的布局靈活性 * 任何一個容器都可以設置為`Flex`布局模式 ```css /* 塊元素可以設置為Flex容器 */ .container { display: flex; } /*內聯元素也可以設置為Flex*/ span { display: inline-flex; } /* WebKit內核瀏覽器,如Safari, 需要加前綴*/ div { display: -webkit-flex; /*Safari*/ display: lfex; } ``` * 一旦設置為Flex容器, 則容器內子元素的`float`, `clear`, `vertical-align`屬性全部失去意義, 沒有效果了 * 由此可見, **Flex布局**的目標明確, 就是要把**Float布局**拍死在沙灘上 ## Tips: 布局演變史 ### 1. 表格布局`table` * 世界第一個網頁誕生于1990年12月20日, 依賴HTML中的`<table>`標簽來實現 * 頁面隨著內容的不斷增加, 會變更越來越臃腫, 難以維護 ### 2. 定位布局`positon` * 隨著頁面復雜度的不斷提升, 更多的屬性被添加到HTML, CSS中 * 其中, CSS中的`position`屬性具有革命性 * 使頁面中的元素可以擺脫表格單元格的束縛,可以定位到窗口中的任何位置 ### 3. 浮動布局`float` * 浮動`float`技術的初衷并不是為了布局, 而是用來處理文本與圖片的排版問題 * 因為任何元素一旦浮動就會變成塊元素,從而可以設置寬高, 非常適合頁面布局 * 所以, 網頁設計師就使用`float`再配合`<div>`,`<span>`,幾乎可以完全任何頁面布局 * 但是元素浮動后, 為了防止對它后面的同級元素產生影響, 就必須清除浮動`clear` * 另外, 當元素之間具有層級關系時, 子元素的浮動會導致父元素失去高度 * 當然浮動千萬的問題遠不止以上幾點,所以,業界一直在尋求一種真正布局技術 ### 4. 彈性布局`flex` * 我們知道,浮動布局很容易實現元素水平居中, 但是垂直居中就非常的困難,實現起來很麻煩 * 用浮動技術來進行網頁布局,是一種"無心插柳柳成萌"的結果, 算是一種巧合吧 * 使用Flex彈性布局, 就是針對浮動布局的所有痛點而生, 元素浮動的后遺癥全部解決 * 所以在Flex容器中, 不能,也沒必要更使用`float`屬性,沒了浮動當然也不再需要`clear` * Flex有自己的元素垂直對齊解決方案, 所以`vertical-align`屬性也失效 ### 5. 網格布局`grid` * 不得不說, 世間萬物就是一個輪回, 曾經那么令人不堪的表格布局,居然回歸了 * 表格布局盡管有那么多的缺點,但是它的優勢也非常明顯,就是簡單, 直觀 * 其實就這一條, 就足以征服所以設計師,**簡單直觀**難道不是我們一直追求的目標嗎? * 如果有一種布局方式, 即有表格的簡單直觀, 又有彈性盒子的友好體貼, 那該有多好? * 這個愿意現在終于實現了, **網格布局(Grid)**橫空出世 * 網格布局集美貌與智慧于一身, 同時具備了表格布局與彈性布局的所有優點 * 這么好的東西, 可惜很多瀏覽器支持情況不樂觀, 移動端支持好一些 * 但相信, 會有越來越多的瀏覽器加入到網格布局的行列中, 大家現在學習正當時 > Tips: 布局演變史: 表格(table) ==> 定位(position) ==> 浮動(float) ==> 彈性(flex) ==> 網格(grid, 發展中...)