淺談新的佈局方式-flex

引言：

　　網頁佈局在flex出來以前，是由盒模型爲底子，float，position，table，百分比來進行佈局的，重繪的比較多，影響性能，複雜又很差維護。flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。我在網上看到有不少寫flex佈局的博文，本身就寫着複習一下這個flex佈局。

一 基本概念：

　　採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。（任何一個容器均可以指定爲Flex佈局，塊級元素，行內元素也可。）

　　它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」。

二 屬性：

　 容器的6大屬性：

　　 1 flex-direction 項目的排列方向

　　　　flex-direction: row;（默認值）主軸爲水平方向,從右往左。

　　　　　　　　　　   row-reverse; 主軸爲水平方向，從左往右。

　　　　　　　　　　   column; 主軸爲垂直方向，從上往下。

　　　　　　　　　　　column-reverse; 主軸爲垂直方向，從下往上。

　　 2 flex-wrap 是否換行

　　　　flex-wrap: no-wrap（默認）：不換行。

　　　　　　　　    wrap : 換行。

　　　　　　　　　 wrap-reverse : 換行，從下往上換行。

　　 3 flex-flow flex-direction屬性和flex-wrap屬性的簡寫形式。

　　　　flex-flow : row nowrap (默認值)

　　 4 justify-content 項目item在水平上的對齊方式。

　　　　justify-content: flex-start; 往右邊對齊

　　　　　　　　　　　  flex-end; 往左邊對齊

　　　　　　　　　　　  center; 往中間對齊

　　　　　　　　　　　  space-between; 兩邊對齊，項目之間的間隔都相等。

　　　　　　　　　　　  space-around; 每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

　　 5 align-items 項目item在垂直上的對齊方式。

　　　　align-items: flex-start; 往上對齊。

　　　　　　　　　　flex-end; 往下對齊。

　　　　　　　　　　center; 往中間對齊。

　　　　　　　　　　baseline; 項目的第一行文字的基線對齊。

　　　　　　　　　　stretch;（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

　　 6 align-content 多個項目在垂直上的對齊方式。

　　　　ps：若是項目只有一根軸線，該屬性不起做用

　　　　屬性和align-content的屬性同樣。

 

　 項目的6大屬性

 

　　 1 order 項目的排列順序。數值越小，排列越靠前，默認爲0（按代碼書寫的順序來。）

　　 2 flex-grow 項目的放大比例，默認爲0（即若是存在剩餘空間，也不放大。）

　　　　若是item都爲1，則均等平攤整個空間。若是有一個item和其餘的item不相等，則按照比例放大。

　　 3 flex-shrink 項目的縮小比例，默認爲1（即若是空間不足，該項目將縮小。）

　　　　若是item都相等，則均等平攤空間，若空間不足，則都等比例縮小。若是有一個item爲0；當空間不足時，其不縮小。

　　　　ps：負值無效。

　　 4 flex-basis 在分配多餘空間以前，項目佔據的水平上的空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

　　 5 flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

　　　　優先級：auto (1 1 auto) 或者 none （0 0 auto);

　　 6 align-self 容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

　　　　ps:只針對於垂直方向上的,水平方向上沒有該屬性。

　　　　屬性和align-items是的屬性同樣，多了一個auto。

三 實例

 　flex佈局大部分實例能夠參考https://www.w3.org/TR/css-flexbox/#box-model　寫的特別詳細。

　　1 div使用display：flex後初始化的結果：

　　html代碼：

<div class="container">
     <span class="item">
         <span class="item">111</span>
     </span>
     <span class="item">2</span>
     <span class="item">3</span>
     <span class="item">4</span>
     <span class="item">5</span>
</div>

　　css 樣式：

.container{ height: 500px; width: 500px; border: 1px solid; display: flex; position: relative;       
} .item{ width: 50px; height: 50px; border:1px solid #ccc; float: right; vertical-align: middle;
}

　　結果：

                  

　　這個例子說明了:

　　　　1 只要父元素設置了display：flex;全部的item都成了行內塊或者塊級元素，能夠設置寬度高度.

　　　　2 item中的flaot無效，一樣的 clear也無效，vertical-align也無效， 可是position:absolute是有效（我看網上有人說是無效的。）

　　　　3 父元素設置了flex後，只針對於子元素，其後代元素不起做用，若想要後代元素起做用，必先給他的父元素聲明flex。

 

　　2 實現導航欄的nav兩邊對齊，就是有導航的在左邊，登錄之類的在右邊。

　　html:

<nav>
     <ul>
          <li><a href="/">首頁</a> </li>
          <li><a href="/">產品</a></li>
          <li><a href="/">關於咱們</a></li>
          <li class="login"><a href="/">登錄</a></li>
      </ul>
</nav>

　　css樣式：

nav > ul{ display: flex;
} nav li { list-style: none; margin: 10px;
} .login{ margin-left: auto;
}

　　結果以下：

　　　　

　　若是不使用display：flex來作的話，可使用float的方式來講，可是相對來講稍微麻煩點，代碼量絕對比flex多。追求簡單何樂不爲？

四 兼容性

　　

　　如圖可知，兼容性基本上都支持來，只有ie9如下不支持。flex佈局最適合在移動端進行佈局，開發中要適當的添加私有前綴來兼容。

.flex() { display: -webkit-box; display: -moz-box; display:-webkit-flex; display: -ms-flexbox; display:flex;
}

 

 

參考資料：

菜鳥教程 http://www.runoob.com/w3cnote/flex-grammar.html

阮一峯大大 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$