Flex語法
Flex布局意為"彈性布局",用來為盒模型提供更多靈活性。此外,Flex定義的容器可以對塊級元素(display: flex;
)或行內元素(display: inline-flex;
)生效,需要注意的是,如果父元素設置了Flex容器,則子元素的float
、clear
和vertical-align
屬性將失效。
Flex布局需要注意下面幾個重要的概念,結合下面這張圖也許能更好的理解:
- flex容器(flex container)
- flex項目(flex item)
- 主軸(main axis)
- 交叉軸(cross axis)
- 開始位置(start)
- 結束位置(end)
提示:定義在容器(container)上的屬性和定義在項目(item)上的屬性不可搞混!
關於語法的其余部分,請參考阮一峰的教程,希望你能熟記里面的示例圖:
上面部分搞定,趁熱打鐵做一下下面的練習,做上兩次基本上Flex就基本沒問題了。
- Flex訓練游戲: 地址
Flex常規布局
1. 單列布局
單列布局使用場景非常多,用來實現文本或者block的居中效果。對外部容器定義就可實現內部布局效果,實現起來非常簡單,尤其是使用響應式布局中。以下示例都是Flex的基本使用語法。
基本的DOM結構如下:
<div class="parent"> <div class="children"></div> </div>
- 水平居中
.parent{ display:flex; justify-content:center; }
- 垂直居中
.parent{ display:flex; align-items:center; }
- 水平垂直全部居中
.parent{ display:flex; justify-content:center; align-items:center; }
2. 多列布局
多列布局使用較多,比如商品展示需要在左側顯示圖片,右側顯示詳情;
多列布局的示例DOM結構如下:
<div class="container"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div>
- 左列定寬,右列自適應 | 右列定寬,左列自適應(同理)
該布局方式非常常見,適用於定寬的一側常為導航,自適應的一側為內容的布局。
示例
樣式
.container{ display:flex; } .left{ flex: 0 0 300px; } .right{ flex:1; }
- 左中兩列定寬,右側列自適應
示例
樣式
.container{ display:flex; } .left,.center{ flex: 0 0 100px; } .right{ flex:1 }
- 兩側定寬,中欄自適應
示例
樣式
.container{ display:flex; } .left{ width:100px; } .center{ flex:1; } .right{ width:100px; }
- 一列不定寬,一列自適應
示例
樣式
.container{ display:flex; } .right{ flex:1; }
- 多列等分布局
多列等分布局常出現在內容中,多數為功能的,同等級內容的並排顯示等。
示例
樣式
.container{ display:flex; } .left,.center,.right { flex:1; }
3. 九宮格布局
示例
DOM結構
<div class="container"> <div class="row"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> <div class="row"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> <div class="row"> <div class="left">Left</div> <div class="right">Center</div> <div class="center">Right</div> </div> </div>
樣式
.container { display: flex; flex-direction: column; height: 300px; width: 300px; .row { height: 100px; display: flex; } .left,.center,.right { flex: 1; height: 100px; } }
4. 聖杯布局
示例
DOM結構
<div class="container"> <header class="header"> Header </header> <article class="article"> <nav class="nav">Nav</nav> <section class="body">Body</section> <aside class="aside">Aside</aside> </article> <footer class="footer"> Footer </footer> </div>
樣式
.container { display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; .header,.footer { flex: 0 0 100px; } .article { display: flex; flex: 1; .nav { flex: 0 0 100px; } .body { flex: 1; } .aside { flex: 0 0 100px; } } }
5. 響應式布局
設置meta
使用前需要對設置meta標簽,設置布局寬度等於設備寬度,布局viewport等於度量viewport。
<meta name='viewport' content='width=device-width,initial-scale=1'>
媒體查詢
HTML 4和CSS 2目前支持為不同的媒體類型設定專有的樣式表,比如,一個頁面在屏幕上顯示時使用無襯線字體,而在打印時則使用襯線字體,screen 和 print 是兩種已定義的媒體類型,媒體查詢讓樣式表有更強的針對性,擴展了媒體類型的功能; 媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成,媒體查詢中可用於檢測的媒體特性有width、height和color(等),使用媒體查詢,可以在不改變頁面內容的情況下,為特定的一些輸出設備定制顯示效果。
@media screen and (max-width:960px){....} <link rel='stylesheet' media='screen and (max-width:960px)' href='xxx.css' />
兼容性問題解決方案
對於移動端的處理主要是解決兼容性,畢竟新出的事物普遍接受還是需要過程的,但是把握趨勢對不兼容的情況需要做好補丁。這里是Caniuse.com上的關於Flex的兼容性。
我在開發的要求是能用工具處理的不進行人為干預,因為這樣會增加開發及維護成本,浪費生命。 有句話: "工欲善其事必先利其器",因此按照Flex的標准去開發,剩余的事情交給自動化工具處理。
這里使用的工具是gulp-autoprefixer,配置的參數:
{
browsers: [ 'last 2 versions', 'iOS >= 7', 'Android >= 4'], cascade: false }
源碼
{
display: flex; flex: 1; align-items: center; }
兼容后
{
display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
最后
Flex布局高效簡潔且有兼容性處理方案,因此朝這個趨勢走不會有錯。