flex佈局

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就基本沒問題了。

• 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佈局高效簡潔且有兼容性處理方案，所以朝這個趨勢走不會有錯。