有趣的Flex佈局

　　對於剛接觸前端的小白，在還原頁面樣式的時候，每每會遇到頁面佈局（layout）上的問題，用着生硬的padding來固定盒子的位置，不只代碼看的沉重，還得適應各類瀏覽器頁面，始終沒有辦法作到統一。接下來，我來介紹一種能把佈局寫活的方法：Flex佈局。

　　Flex佈局是Flexible Box的縮寫，意思是彈性佈局。設爲flex佈局後，子元素的float（浮動）、clear（清除浮動）和vertical-align（垂直對齊方式）屬性會失效。

　　採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。任何一個容器均可以指定爲Flex佈局（塊級元素和行級元素）。

　　Flex有如下六種屬性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. flex-direction屬性

   ---

   　　flex-direction屬性決定主軸方向，分別有四個值：row（默認值，左=>右）row-reverse（右=>左）column（上=>下）column-reverse（下=>上）。

   　　當咱們在容器裏寫入flex佈局：display：flex，flex-direction屬性會默認爲row：

   .father{
       display: flex;
       background-color: rgb(192, 185, 185);
   }

   　　它的子元素我設置了四個：a,b,c,d（寬爲200px，高爲50px，顏色不一樣）。頁面效果爲下：

   　　改變flex-direction屬性的值：row-reverse，頁面效果改變爲：

   　　當flex-direction屬性的值變爲column時，效果和不寫入flex佈局同樣，及從上到下；column-reverse時則相反。

2. flex-wrap屬性

   ---

   　　flex-wrap屬性規定了

   　    當佈局內元素一行盛不下，如何換行。flex-wrap屬性有三個值：nowrap（默認，不換行）wrap（第一行在上）wrap-reverse（第一行在下）。

   　　一樣是上面的例子，我把每一個元素的寬度設置爲500px，頁面渲染爲下：

   　　打開佈局咱們看到：

   　　它的樣式自動調成頁面可容納寬度，這就是當flex-wrap屬性nowrap默認下的效果。改變flex-wrap屬性的值爲wrap時，頁面效果爲下：

   　　當第一行放不下時，轉到第二行繼續，依次排列。改變flex-wrap屬性的值爲wrap-reverse時，頁面效果爲下：

    　　排列順序爲從左到右，從下到上，最後一行放不下，轉到倒數第二行，依次排列。

3. flex-flow屬性

   ---

   　　flex-flow屬性包含flex-direction屬性和flex-wrap屬性，格式爲：

   .father{
       display: flex;
       flex-flow: row nowrap; background-color: rgb(192, 185, 185); }

   　　其中row爲flex-direction屬性的默認值，nowrap爲flex-wrap屬性的默認值，這兩個值視頁面需求更改。

4. justify-content屬性

   ---

   　　justify-content屬性定義了佈局內元素在水平方向的對齊方式，其有五個值：flex-staet（默認值，左對齊）flex-end（右對齊）center（居中）space-between（兩端對齊，元素之間間隔相等）space-around（每一個元素兩側間隔相等）。

   　　justify-content屬性每每用在頁面右側按鈕，輸入框、圖片等元素對齊方式。

   　　在我接觸的項目裏，須要不少放置在頁面右側的按鈕，如「新建」按鈕，「刪除」按鈕等，此時我就會用justify-content屬性調整按鈕的位置，例如：

   <div class="father">
       <button>新建</button>
   </div>

   　　這是一個新建按鈕，我須要把它放置到頁面的右側，則我須要設置這個盒子的justify-content屬性：

   .father{
       display: flex;
       justify-content: flex-end;
       background-color: rgb(192, 185, 185);
   }

   　　此時按鈕就出如今頁面右側。若按鈕所在的同一水平的左側有其餘的元素，則能夠改變justify-content屬性的值爲space-between，爲下：

   <div class="father">
           <div class="a">a
           </div>
           <button>新建</button>
   </div>
   
   
   
   .father{
       display: flex;
       justify-content: space-between;
       background-color: rgb(192, 185, 185);
   }

   　　頁面效果爲下：

   　　而後改改樣式就行了。

   　   當使用space-around值時，系統會本身分析頁面的寬度以及每一個元素對應的位置，若是對頁面效果不滿意，還能夠用padding設置間距。

5. align-items屬性

   ---

    　  align-items屬性定義佈局裏的元素在垂直水平的對齊方式。align-items屬性有五個值：stretch（默認值，未設置高度時與父元素高度相同）flex-start（垂直向上對齊）flex-end（垂直向下對齊）center（垂直居中對齊）baseline（元素第一行文字對齊）

   　   當佈局裏的每一個元素設置了不一樣的高度時，align-items屬性默認值會變爲flex-start，效果爲下：

   　　我設置了父元素高度爲300，子元素a,b,c,d高度分別爲100，120，40，200。默認爲向上對齊。當值變爲center時，效果爲下

   　   爲了實現文字對齊，我給這些元素設置了margin-top，分別爲20，50，10，30。改變align-items的值爲baseline，效果爲下：

   　　設置padding-top也能夠，可是會改變原來元素的高度。

6. align-content屬性
   

   ---

　　　　　  若佈局容器內有多行元素，則align-content屬性起做用，若只有一行元素，則align-content屬性不起做用。

　　　　　  align-content屬性有六個值：stretch（默認值，全部行佔滿整個佈局）flex-start（於佈局頂部對齊）flex-end（於佈局底部對齊）center（於佈局高度中心對齊）space-between（於頂部和底部對齊，元素間隔相等）space-around（元素上下間隔相等）

　　　　　  align-content屬性與justify-content屬性相似，一個是水平對齊，一個是垂直對齊。