CSS3之Flex佈局及應用實例

一、Flex佈局是什麼？

Flex是Flexible Box的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性。

任何一個容器都可以指定爲Flex佈局。

.box{
  //display: flex;
　 //display: inline-flex;　//行內元素也可以使用Flex佈局。

/*Webkit內核的瀏覽器，必須加上-webkit前綴。*/
　 display: -webkit-flex; 
   display: flex;
}

注意:設爲Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

二、基本概念

採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱”容器”。它的所有子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱”項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

三、容器的屬性

以下6個屬性設置在容器上。

1）flex-direction 

    　決定主軸的方向（即項目的排列方向）

    　 屬性值：row（默認值）：主軸爲水平方向，起點在左端。
　　　　　 　row-reverse：主軸爲水平方向，起點在右端。
　　　　　 　column：主軸爲垂直方向，起點在上沿。
　　　　　 　column-reverse：主軸爲垂直方向，起點在下沿。

２）flex-wrap

　　　如果一條軸線排不下，如何換行。

　　　屬性值：nowrap（默認）：不換行。　　wrap：換行，第一行在上方。　　wrap-reverse：換行，第一行在下方。

３）flex-flow

　　　flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap

４）justify-content

　　　justify-content屬性定義了項目在主軸上的對齊方式。

　　　屬性值： flex-start（默認值）：左對齊

　　　　　　 　flex-end：右對齊

　　　　　　 　center： 居中

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

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

5）align-items

　　定義項目在交叉軸上如何對齊。

　　屬性值：flex-start：交叉軸的起點對齊。

　　　　　　flex-end：交叉軸的終點對齊。

　　　　　　center：交叉軸的中點對齊。

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

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

６）align-content

　　　定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

　　　屬性值：flex-start：與交叉軸的起點對齊。

　　　　　　　flex-end：與交叉軸的終點對齊。

　　　　　　　center：與交叉軸的中點對齊。

　　　　　　　space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

　　　　　　　space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

　　　　　　　stretch（默認值）：軸線佔滿整個交叉軸。

實例1 用flex佈局製作導航欄

 以前在寫導航欄的時候，總是用float或者display：inline-block實現，但是這兩種方法都會有各種問題，比如浮動會影響父元素以及兄弟元素的樣式，需要清除浮動

 現在用flex會很方便，並且是彈性佈局

flex:1表示下面的綜合：
    flex-grow : 1; // 這意味着div將以與窗口大小相同的比例增長
    flex-shrink : 1; // 這意味着div將以與窗口大小相同的比例縮小
    flex-basis : 0; // 這意味着div沒有這樣的起始值，並且將根據可用的屏幕大小佔用屏幕。例如： - 如果包裝器中有3個div，則每個div將佔用33％。

<ul>
 <li>音樂</li>
 <li>影視</li>
 <li>旅遊</li>
</ul>

ul{
  display: flex;         
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}

效果圖：

我們只要在HTML代碼裏面多加兩個li元素，導航便彈性變化，不需要改變css代碼，即可在導航欄中增加項目，如下：

實例2 用flex佈局多列布局

<div class="demo">
   <div class="left"></div>
   <div class="center">
      <p>description</p>
      <p>description</p>
      <p>description</p>
      <span>description</span>
   </div>
   <div class="btn">確認</div>
   <div class="btn">取消</div>
</div>

.demo{
  width: 600px;
  height: 150px;
  border: 1px solid #b7b2b7;
  margin: 30px auto;
  padding-top: 17px;
  display: flex;                /*設置爲flex佈局*/
  justify-content: space-around;
}
.demo > div{
  flex: none;
}

實例3 用flex佈局固定百分比佈局

 (1) 等分佈局：

<div class="demo">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

.demo{
  display: flex;             
}
.item{
  flex: 1;
}

（2）某一個固定

.demo{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}

（3）某兩個固定

.demo{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}

（4）三個固定

.demo{
  display: flex;           
}
.item{
  flex: 1;
}
.item1{
  flex: 0 0 10%;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}

5.  聖盃佈局，如圖所示

<div class="demo">
   <div class="header">頭部</div>
   <div class="body">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
   </div>
   <div class="footer">底部</div>
</div>

.demo{
  display: flex;
  flex-direction: column;            
}
.demo div{
  flex: 1;
}
.body{
  display: flex;  
} 
.header,.footer,.left,.right{
  flex: 0 0 20%!important;
}

7.  底部footer固定在底部，但是不是fixed定位

頁面會經常用到固定的底欄，但是當頁面內容過少時，footer會到頁面中間，下面用flex來解決

<div class="demo">
   <div class="main">這是主要內容</div>
   <div class="footer">這是底部</div>
</div>

.demo{
    display: flex;
    flex-direction: column;
}
.main{
    flex: 1;
}
.footer{
    width: 100%;
    height: 120px;
}