flexbox布局是CSS3中新增的布局屬性，但任何樣式屬性起作用的前提則是，它必須有對應的html結構。我們首先在html 文件中定義相應的結構，才能使用布局樣式。我們簡單地寫一個ul li 列表，體驗一個flex 布局的強大。新建一個index.html 書寫結構，一個index.css 書寫樣式。

　　index.html , 為了以後便於說明，給每一個li 作了一個1,2,3 標記。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
 

　　index.css, 主要是提供默認樣式，以便後面進行操作。

ul {
    margin: 0;
    padding:0;
    width: 600px;
    margin: 100px auto;
    background: grey;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 8px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
}
li:nth-child(1) {
    background: red;
}
li:nth-child(2) 
 
{
    background: green;
}
li:nth-child(3) {
    background: yellow;
}

　　現在在html頁面中展示如下：

　　基本的內容已經完成，現在可以使用flexbox了。使用flex布局，首先要定義一個flex容器。容器，容器，肯定是指父元素，因為它包含子元素，可以稱之為容器，在我們這個例子中就是在ul，給ul設置怎樣的樣式才能使之成了flex 容器，那就是display: flex, 或display:inline-flex. 設為flex 或 inline-flex 都會使ul變成了flex容器，它們的區別是設置display:flex 後，ul 仍然是塊級元素，獨占一行，而display:inline-flex 則使ul 成了行內元素，可以和其他行內元素進行水平排列。我們可以在ul 後面添加一個span標簽實驗一個，html 修改如下

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <span>測試ul 是行內元素還是塊級元素</span>

　　給ul添加dispaly: flex 屬性：

ul {
    display: flex;   /*增加 display: flex;屬性*/

    margin: 0;
    padding:0;
    width: 600px;
    margin: 100px auto;
    background: grey;
}

　　可以看到頁面如下，給ul 設置display:flex 後，ul仍然是塊級元素

　　把ul 的display: flex 換成display：inline-flex, 頁面展示如下：

　　display： inline-flex , 確實使ul變成了一個行內元素，在水平方向上進行排列。

　　不管設置成什麽，ul 都成了flex容器，因為我們發現, li元素由原來的垂直排列變成了水平排列。這時元素li也有了另外一個名稱，叫flex items(flex 項目)。flex容器中的每一個元素都稱之為一個flex項目。 這就是flex布局中非常重要的兩個概念： flex 容器和flex 項目。

　　當一個元素成為了flex容器後，它默認存在兩根軸上，主軸(main axis)和 側軸(cross axis), 它就是我們平常理解的水平軸和垂直軸，因為在一個平面中，只有這兩根軸，flex布局也是在平面上布局，它也不例外，那為什麽不叫水平軸和垂直軸？因為主軸的方向是不固定的，它即可以是水平方向，也可以是垂直方向。當主軸是水平方向時，側軸就是重直方向，當主軸是垂直方向時，側軸就是水平方向。 它有兩種可能，所以不能簡單稱之為水平軸或垂直軸。

　　主軸是什麽方向也很重要，因為它影響了flex 項目的排列。就像上圖展示，如果主軸是水平方向，flex 項目就是水平方向依次排列。如果主軸是垂直方向，那麽flex項目就會沿著垂直方向依次排列。所以當一個元素成為flex 容器時，我們首先要確定的就是主軸的方向。正好flex-direction屬性提供這樣的設置。

　　flex-direction 定義了主軸的方向，相應地也確定了側軸的方向，因為只有這兩個軸且它們是垂直關系。它有四個屬性值：row || row-reverse || column || column-reverse。

　　row: 主軸為水平方向，元素從左邊開始排列。

　　row-reverse: 主軸方向為水平方向，不過元素從右向左開始排列。

　　column: 主軸為垂直方向，元素從上到下排列。

　　column-reverse: 主軸為垂直方向，不過元素是從下向上排列。

　 reverse是反轉的意思,row-reverse 就是表示，在row的基礎進行反轉，原來是從左到右排列，那麽現在是從右到左, column-reverse 就表示從下到上。

　　它的默認值是row , 甚至我們不設置這個屬性，它的值也是row. 這也就解釋了上面，當我們只給ul 設置display：flex, 時，所有的li 橫向排列。

　　除了flex-direction之外，還有5個屬性可以用到flex 容器上，就是父元素上，它們是: flex-wrap, flex-flow, Justify-content, Align-items, Align-content。下面 我們一一介紹

　　flex-wrap: 它定義了當我們的flex項目非常多時，在flex容器中一行放不下時，元素怎麽排列，到底換不換行。 它有三種屬性值： nowrap, wrap 和wrap-reverse;

　　　　nowrap 是它的默認值，表示不換行，這麽多項目始終在一行排列，這就導致了所有的項目都要進行縮小處理。

　　　　wrap 表示可以換行，那麽一行放不下的元素，就會放到下一行，形成了多行。

　　 　 wrap-reverse , 可能你已經猜到了，它也是表示可以換行，不過方向相反而已。

　　我們給ul 元素分加別添加 這三個屬性試一試， 這時我們設置方軸方向為row， flex-drection: nowrap

ul {
    display: flex;   /*增加 display: flex;屬性*/
    flex-direction: row;  /*設置主軸方向*/
    flex-wrap: nowrap;    /*設置是否多行顯示*/
    margin: 0;
    padding:0;
    width: 600px;
    margin: 100px auto;
    background: grey;
}

　　由於li元素也較少，能在一行放下，我們再寫幾個li， 使flex 項目在一行放不下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

　　這時頁面展示如下，在no-wrap 下，無論flex項目有多少，它都不會換行，每個項目只會進行縮小來適應整個容器的寬度。

　　現在把flex-wrap:nowrap 改成flex-wrap:wrap, 可以看到以下展示，兩行顯示，flex項目換行了。

　　現在再把flex-wrap: wrap 換成 flex-wrap: wrap-reverse, 可以看到 元素換行，且第一行在下面，對上面的圖進行了反轉

　　flex-flow: 它是上面兩個屬性的簡寫，flex-flow: flex-direction 的取值 flex-wrap 的取值, 如： flex-flow: row wrap, 這時就不介紹了。

　　Justify-content: 它定義了flex items 在主軸上怎樣進行排列。 Flex-start , flex-end, center, space-between, space-around

　　Align-items 定義了flex items 在側軸cross axis上怎麽進行排列。 Flex-start , flex-end, center ,stretch, baseline. 默認取值 stretch. Baseline

　Align-content: 只有在flex-warp: wrap 形成多行時才起作用。它和aling-item 設置，多行時，元素在側軸上怎麽排列。

用在單個flex 項目上的屬性：Order || Flex-grow || Flex-shrink || Flex-basis

Order 順序，重新排列每一個flex item 順序。默認屬性是0,也就是每一個flex items 按照它們在html中定義的結構進行排列。 

Just content 定義的元素在主軸上怎麽排列，是在容器的左邊，右邊還是中間。

Align items 定義的項目在側軸上怎麽排列。它有兩個值strech base。Strech 就默認屬性，如果我們的item 沒有設置高度或高度為auto, 那麽它會在側軸方向上進行提伸，占滿整個側軸的空間。

Baseline 主要指的是如是flex-item 中有p , p標簽中的下面對齊， 如果沒有p標簽，則元素的底部對齊。

Align self： 主要對一個元素在側軸上的對齊方式進行設置，默認屬性是auto，所以不設置的話，它跟align-item屬性一致。 如果進行設置，它不會覆蓋掉align-item屬性。

單個flex item 屬性的設置

Flex-basis：控制每一個flex-item默認尺寸大小，在其它屬性之前，它和item的寬度或高度相互換，如果我們設置的主軸是水平方向flex-direction row, 它就和元素的寬度相互換，如果我們設置的主軸方向是垂直方向flex-direction column, 它就和元素的高度相互換。

Flex-grow: 它指的是當flex-item沒有占滿整個flex-contain 的空間時，每一個元素怎麽變化，要不要變大去占據空間，grow 就是生長，長大的意思，它的默認值是0，不會進行變化。 這時我們把每一個flex-item的flex-grow值設為1, 可以看到它占滿了整個flex container的空間， flex-grow 的值覆蓋了width的值。 那麽這個屬性值1 代表什麽呢/? 我們把所有的值都設為999， 它的形為和剛才設為1 沒有什麽區別。

現在我們把其中一個flex-item的值改為flex-grow 改為2， 可以發現這個元素變大了，再改3, 它更大了，從這裏可以看出它不是一個絕對值，它是相對值，是某個元素相對其化元素的比例。當設置每一個項目的flex-grow 為1時，一共有6 個元素，那麽就是6，整個flex-container會被分成6份，每一個flex-item 各占一份，所以都相同。如果我們其中一個flex-flow設為2. 還是6個元素，那麽整個flex container 就分成1+1+2+1+1+1 = 7份，其余5個各1/7, 而第三個占2/7,所以第三個就相對變大了， flex-grow 設置的某個或某些項目相對於其他項目的比例。

Flex-shrink : shrink 收縮，當每一個flex item 的寬度總和超過 flex-contaier容器的時候，每一個項目都會進行收縮。它的默認值是1, 表示每一個元素都會比例收縮。 如果把某個元素的flex-shrink 設為0, 它就不會進行收縮。 如果把它設置3，和flex-grow 一樣，它也是比例，每一個flex item收縮1, 它收縮3， 它比別的項目收縮更嚴重。

Flex： 是上面三個屬性簡寫，像邊框border屬性一樣。 Flex: flex-grow flex-shrink flex-basis

它的默認取值為0 1 auto，這和我們平時沒有設置這個屬性表現一致，flex-basis: auto 表示，它和元素的寬度或高度保持一致，flex-grow等於0， 表示 如果父元素有剩余空間，它並不會擴大，

Flex-shrink， 如果父元素空間不足，它會進行收縮。

現在我們設置兩個元素，一個是flex: 2 1 300px; 一個是1 2 300px; 父元素的寬度為640px;正好放下這個元素。

現在我們看一下flex-shrink是怎麽工作的？當我們把容器寬度改為430px; 整個容器損失了210px的空間，由於第一個元素的flex-shrink 是1， 第二個shrink是2, 所以這損失的210px， 分成了3份，第一個元素占1份，也就是70px, 所以第一個元素損失了70px,寬度變為了300-70 =230px; 第二個元素占兩份，也就是140px, 所以第二個元素損失了140px;寬度變為了300-140= 160px; flex-grow 的工作原理也是一樣，當我們把容器寬度增大到940px;時， 它多獲得了300px的空間，每一個元素都會增大，由於第一個是flex-flow是2, 第二個flex-flow是1, 所以這多出來的300px, 也是分成了3份，第一個項目占2份，200px, 寬度增大到300+200 =500px; 第二個占1份，100px, 寬度增大到300+100 =400px;

CSS3 ---flex box