這篇文章是我在阮一峰老師的flex布局教程下，按照自己的理解重寫寫一遍，以便增強理解。如果你來到這裏最好去看一下阮一峰大神的Flex布局教程

正式開始自己的。

說起布局方式，大家首先要了解css3有哪些布局方式，這裏就不一一詳解了。網上一大堆，而且平時寫css3的時候大家一般也都會用到。

Flex布局：

1.概念：flex布局，英文全稱為：Flexible Box 也就是彈性盒子的意思。設置flex布局的元素叫做容器，其他的子元素叫做項目。恩，我之前還真不知道叫做項目，沒註意過。在容器中存在著兩根軸：主軸（水平）和交叉軸（垂直）。

然後我們先創建一個正常的li列表

<div>
    <
 
ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
        <li>fifith</li>
    </ul>
</div>

在簡單設置一下css樣式，也不能太難看

  div{
      height: 500px;
      width: 500px;
      margin:0 auto;
      background-color
 
: #333;
  }
  ul{
      padding: 20px;
      box-sizing: border-box;
  }
    div li{
        list-style: none;
        display: block;
        width: 200px;
        height:50px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
　　　　　margin：10px;
    }
    li:nth-child(n){
        background-color
 
: #007aff;
    }
    li:nth-child(2n){
        background-color: #8a6de9;
        color: #fff;
    }

最終展現在我們眼前的效果就是

這個留著備用，我們繼續開始下面的流程。

2.作用在容器上面的6大屬性

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

2.1首先看第一個flex-direction屬性

在之前我們設置好得li列表上面我們做一下改動，給div增加新的樣式，為了方便容易看，我就直接在之前的樣式後面 繼續為 div 下ul元素添加樣式。

   div ul{
        display: flex;
    }

看一下效果

從原本的橫向排列，變成了縱向排列。而且之前我們設置的 每個li 的寬度已經不起作用了。當我們設置display:flex;的時候，主軸默認的方向是水平方向也就是我們看到的樣子。所以我們可以通過改變主軸的方向來隨意調整我們li的排列方式。

        /*設置主軸方向為垂直方向*/
        flex-direction: column;
        /*設置主軸方向為垂直方向，從下往上*/
        flex-direction: column-reverse;
        /*設置主軸方向為水平方向，從左往右*/
        flex-direction: row;
        /*設置主軸方向為水平方向，從右往左*/
        flex-direction: row-reverse;
        flex-direction: inherit;

flex-direction有五個屬性，也可以說四個，畢竟最後一個可以省去。我們只要記著兩個就行，column代表著垂直方向，row代表著水平方向。

2.2、這裏我們看一下flex-wrap屬性。

上面我們看到，設置成flex布局之後，li的寬度發生了變化，而且沒有換行，擠在了一起。給樣式加上flex-wrap之後，看一下

    div ul{
        display: flex;
        flex-wrap: wrap;
    }

flex-wrap，默認是nowrap。不換行。所以就導致了我們之前的那種情況，現在我們設置成wrap，讓他根據寬度來決定是否換行。這樣一來，就和float一樣了。而且更加方便。flex-wrap還有一個屬性

    div ul{
        display: flex;
        flex-wrap: wrap-reverse;
    }

也就是顛倒個個。

2.3flex-flow也就是flex-direction和flex-wrap的結合體，沒什麽好說的啦！

2.4justify-content

    div ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

也就是設置垂直方向的排列方式，center就是居中。另外還有其他屬性space-between;space-around;這兩個屬性可以說是我經常用到的屬性。

2.4align-item這個就是水平方向的設置了。也justify-content相對應。也就不舉栗子了。

2.5align-content屬性定義的是多根線軸的對齊方式。具體樣式也上面那兩位幾乎一樣的。

3、在項目上的6大屬性。

        order
        flex-grow
        flex-shrink
        flex-basis
        align-self

3.1、order，設置數值，數值越小越靠前。例如我們給最後一個li添加order屬性。設置為-1，樣式為

    li:last-child{
        order: -1;
    }

可以看到第五個fifth排到了第一位！！這就很方便了。也很實用，說實話，我剛剛發現這個屬性的時候就想發現新大陸一樣激動（鬼知道哥倫布怎麽想的）

3.2、flex-grow屬性。設置放大比例，默認值是0，例如我們給最後一個li增加屬性

    li:last-child{
      flex-grow: 1;
    }

3.3、flex-shrink就是縮小比例了。這個就不多說了。

3.4、flex-basis屬性則定義了在分配多余空間之前，項目占據的主軸空間。

3.5、flex屬性就是結合體.....我不是很熟練。還是一個個寫吧

3.6、align-self也就是一個特立獨行的存在。改變自己的排列方式。

Flex布局--必然的選擇