CSS3 flexbox 佈局 ---- flex項目屬性介紹

　　如今介紹用在flex項目上的css 屬性，html結構仍是用ul, li 結構，不過內容改爲1,2,3, 樣式的話，直接把給 ul 設display:flex 變成flex 容器，默認主軸的方向爲水平方向。index.html 

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

　　index.css

ul {
    display: flex;  
    width: 600px;
    border: 1px solid red;
}
li { 
    width: 100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    text-align: center;
    line-height: 100px;
    background-color: #8cacea;
}

　　頁面展現內容以下：

　　用在flex項目上的屬性總共有6個，order || flex-basis || flex-grow || flex-shrink || flex || align-self

　　order，顧名思議，順序的意思，就是在不改變html 結構的狀況下，給每個flex項目從新排序，好比讓第一個項目在最後面，它的取值是一個數字，正數，負數，0 均可以，如8。  瀏覽器在進行重繪時會根據這個數字對flex項目進行從新排列，規則就是從小到大，哪一個項目的order 屬性大，哪一個項目排在後面，反之則在前面，若是有兩個flex項目的order值相等，就按照它們在html中定義的結構進行排列。固然，每個flex項目的order默認取值是0, 表示flex項目會按照html 中定義的結構進行排列。

　　 咱們給每個li 添加一個order 屬性，根據規則，第三個項目排在第一位，第二個項目不變，第一個項目排在最後。

li:nth-child(1) {
    order: 3;
}
li:nth-child(2) {
    order: 2;
}
li:nth-child(3) {
    order: 1;
}

　　頁面的展現效果和咱們預料的一致

　　flex-basis,  在flex-shinrk 和flex-grow 屬性起做用之前，它控制每個flex項目的默認大小，flex-shrink 和 flex-grow 咱們下面會說到。flex-basis 的取值： auto || <length>,  length 就是咱們日常用的一些屬性值，如px, rem. 

　　flex-basic 的默認取值是auto, 那auto 表明什麼意思呢? 若是主軸方向是水平方向(row)，它等於flex項目的寬度(width)。若是主軸方向是垂直方向(conlumn), 它等於flex項目的高度(height)。

　　flex-basis 取值爲length, 表示咱們能夠賦值給它，如150px,  那麼它就會覆蓋掉flex項目原有的寬度或高度(取決於主軸的方向)。

　　咱們如今有三個flex項目，且每個flex項目的寬度是100px, 如今把第一個flex項目的flex-basic設爲100px, 第二個flex 項目的flex-basis 設了200px,第三個flex項目flex-basis: auto 做爲參考，

li:nth-child(1) {
   flex-basis: 100px;
   background: yellow;
}
li:nth-child(2) {
    background: red;
    flex-basis: 200px;
}
li:nth-child(3) {
    flex-basis: auto;
}

　　按照理論，第三個項目和之前沒有什麼變化，且因爲第一個項目的flex-basis 等於100px, 它們兩個應該同樣大，第二個項目flex-basis的200px, 覆蓋掉width:100px, 它比其餘兩個都大。

　　flex-grow: 它指的是當flex項目沒有佔滿整個flex-contain 的空間時，每個項目怎麼變化，要不要變大去佔據空間，grow 就是生長，長大的意思，它的默認值是0，不會進行變化，就像上圖展現的同樣。 這時咱們把每個flex項目的flex-grow值設爲1,

li:nth-child(1) {
    flex-grow: 1;
}
li:nth-child(2) {
    flex-grow: 1;
}
li:nth-child(3) {
    flex-grow: 1;
}

　　能夠看到它佔滿了整個flex container的空間，flex-grow 的值覆蓋了width的值。 那麼這個屬性值1 表明什麼呢? 咱們把全部的值都設爲999， 它的形爲和剛纔設爲1 沒有什麼區別。

　　如今咱們把其中一個flex項目，好比第二個，的flex-grow 改成2

li:nth-child(1) {
    flex-grow: 1;
}
li:nth-child(2) {
    flex-grow: 2;
}
li:nth-child(3) {
    flex-grow: 1;
}

　　能夠發現這個元素變大了，再改3, 它更大了

　　從這裏能夠看出它不是一個絕對值，而是相對值，是某個flex項目相對其它flex項目的比例。當設置每個項目的flex-grow 爲1時，一共有3 個元素，整個flex-container會被分紅3份，每個flex-item 各佔一份，因此都相同。若是咱們其中一個flex-flow設爲2. 仍是3個元素，那麼整個flex container 就分紅1+2+1 = 4份，其他2個各1/4, 而第二個佔2/4,因此第二個就相對變大了， flex-grow 設置的某個或某些項目相對於其餘項目的比例。

　　flex-shrink : shrink 收縮，當全部flex項目的寬度總和超過 flex-contaier容器的時候，每個項目都會進行收縮。它的默認值是1, 表示每個項目都會等比例收縮。如今把元素增長爲6個

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

　　能夠看到每個項目都收縮了，但仍是同樣大，這就是默認值flex-shrink :1 起做用。

　　若是把某個元素的flex-shrink 設爲0, 它就不會進行收縮。如今把第一個項目的flex-shrink改成0，

li:nth-child(1) {
    flex-shrink: 0;
}

　　它確實沒有收縮

　　若是把某個flex項目的flex-shrink設置3，和flex-grow 同樣，它也是比例，每個flex item收縮1, 它收縮3， 它比別的項目收縮更嚴重。把第二個flex-shrink設置爲3，

li:nth-child(1) {
    flex-shrink: 0;
}
li:nth-child(2) {
    flex-shrink: 3;
}

　　

　　flex： 是上面三個屬性簡寫，像邊框border屬性同樣, flex: flex-grow flex-shrink flex-basis,  根據上面的內容，咱們很輕鬆地就能夠得出它的默認值爲0 1 auto，這和咱們平時沒有設置這個屬性表現一致，flex-basis: auto 表示，它和元素的寬度或高度保持一致，flex-grow等於0，表示若是flex容器有剩餘空間，它並不會擴大，flex-shrink爲1，若是flex容器空間不足，它會進行收縮。注意這三個屬性的排列順序

　　如今咱們把元素減小爲2 個，

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

　　而後調整一下樣式，第一個flex項目flex: 2 1 300px; 第二個flex項目 flex: 1 2 300px; flex容器ul 的寬度爲632px, 正好放下這個項目。

ul {
    display: flex;  
    width: 632px;
    border: 1px solid red;
}
li { 
    height: 100px;
    margin: 8px;
    text-align: center;
    line-height: 100px;
}
li:nth-child(1) {
    flex: 2 1 300px;
    background: yellow;
}
li:nth-child(2) {
    flex: 1 2 300px;
    background: red;
}

　　整個效果以下，很是簡單

　　如今咱們看一下flex-shrink是怎麼工做的？當咱們把容器寬度改成422px;

ul {
    display: flex;  
    width: 422px;
    border: 1px solid red;
}

　　整個容器損失了210px(632px -422px )的空間，因爲第一個元素的flex-shrink 是1， 第二個shrink是2, 因此這損失的210px，分紅了3份，第一個項目佔1份，也就是70px, 因此第一個項目損失了70px,寬度變爲了300-70 =230px; 第二個項目佔兩份，也就是140px, 因此第二個項目損失了140px;寬度變爲了300-140= 160px; 打開瀏覽器的控制檯，能夠看到變化的後的值。

　　flex-grow 的工做原理也是同樣，當咱們把容器寬度增大到932px;時， 它多得到了300px的空間，每個項目都會增大，因爲第一個是flex-flow是2, 第二個flex-flow是1, 因此這多出來的300px, 也是分紅了3份，第一個項目佔2份，200px, 寬度增大到300+200 =500px; 第二個佔1份，100px, 寬度增大到300+100 =400px;

一樣能夠打開瀏覽器控制檯查看項目大小

　上面咱們在設置flex屬性值的時候， 三個屬性都設置了，如flex: 2 1 300px; 可是若是咱們只設置一個值呢，如flex: 1，它會有怎麼樣的表現，其餘省略的兩個值到底取什麼值。若是三個值中省略了flex-basis, 它的取值爲0. 若是省略了flex-shrink 和flex-grow, 它們的取值將會是1.

　　由於flex是 flex-grow flex-shrink flex-basis 的縮寫， 因此若是隻寫一個且是正數的話，如flex: 5, 這個數字指的是flew-grow的取值, 省略了flex-shrink和 flex-basis, 若是flex-shrink省略，它的取值是1，flex-basis 省略，它的取值是0. flex: 5 至關於 flex: 5 1 0; 若是寫二個,也是數字的話，如 flex: 1 1; 它們分別是flex-grow flex-shrink 的取值，flex-basis的取值省略，它的取值仍是0； flex: 1 1 至關於 flex: 1 1 0;

　　flex 簡寫形式還有幾個關鍵字： none， auto.   flex: none  至關於flex: 0 0 auto, 它表示flex項目跟元素的寬度或高度保持一致，即不收縮也不擴張。flex:auto至關於flex: 1 1 auto; 

　　align-self： 它決定單個flex項目在側軸上怎麼排列。你能夠還記得 align-items，它也是決定flex項目在側軸上的排列，不過它是對全部flex 項目進行的總體的排列, align-self 就是在這總體排列的基礎上，對單個項目的排列，它的取值爲 auto || flex-start || flex-end || center || baseline || stretch; 它的默認取值auto, 就是表示它跟align-item屬性保持一致； 若是對這個屬性進行設置，它就會覆蓋掉align-item屬性。

　　如今修改一下html, 改回三個flex項目

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

　　給ul設置高度，能夠看出flex項目在側軸上的變化。

ul {
    display: flex;  
    justify-content: space-around;
    width: 600px;
    height: 300px;
    border: 1px solid red;
}
li { 
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #8cacea;
}

　　如今給第一個項目設置align-self 屬性flex-start，看看效果

li:nth-child(1){
    align-self: flex-start;
}

　　能夠看到第一個flex項目在側軸的頂部，和咱們見到的flex-start 一致。

　　flex-end, 第一個項目到了側軸的底部，也和咱們預想的同樣。

　　center: 側軸中間

　　stretch 和baseline,也和align-items中的用法同樣，這裏就再也不演示了。