CSS6：flex佈局

前言：
這是我看過最好的flex佈局教程：
30分鐘完全弄懂flex佈局

傳統的佈局方法與flex屬性通覽

文檔流：塊級元素獨佔一行，從上往下排列，行級元素從左往右排列。

display inline-block主要用來作橫向的佈局。
用分離負maigin用來產生位移。

元素的佈局

學習flex我分紅兩個部分，第一個部分是元素佈局。如下幾個屬性影響着元素的佈局。

/*容器上：*/
justify-content
align-items
flex-direction
flex-wrap
flex-flow
align-content
/*元素上：*/
order
align-self

作完下面的遊戲，看完下面的兩篇文章，理解了上面幾個屬性的用法，就理解了元素的佈局。他們已經寫得很詳細了。這裏不須要我班門弄斧。
30分鐘完全弄懂flex佈局
Flex 佈局教程：語法篇

CSS3【Flex佈局】有趣的青蛙遊戲
遊戲一共24關，每關把全部顏色青蛙移動到對應顏色荷葉上便可過關
通關後就會使用影響佈局的屬性。

伸縮與尺寸

而影響大小和伸縮與尺寸的屬性flex-grow、flex-shrink、flex-basis這三個屬性比較難理解，能夠看30分鐘完全弄懂flex佈局和深刻理解flex佈局的flex-grow、flex-shrink、flex-basis

在這裏記錄一下本身的理解。

flex-basis

• flex-basis 用於設置元素在主軸上的大小（若是軸體變成從上到下，就會覆蓋height）。
• flex-basis: 0 表示元素根據內容撐開寬度，width無論用了。
• flex-basis優先級比width高。
• flex-basis爲auto時，如設置了width則元素尺寸由width決定；沒有設置則由內容決定。（默認就是auto）因此若是一個容器設置爲flex佈局，那麼他裏面的元素在沒有設置寬高的時候，大小都由內容撐開！

詳細仍是看30分鐘完全弄懂flex佈局講的很是明白

flex-shrink

• 若是不換行flex-wrap: nowrap;主軸上的元素總和超了容器寬度，那麼默認會縮小。
• flex-shrink默認是1，即縮小因子是1，也就是當不夠分配時，元素都將等比例縮小，佔滿整個寬度。
• flex-shrink是0表示這個元素不縮小，若是超了，就在其餘元素上動手腳縮小。

詳細仍是看30分鐘完全弄懂flex佈局講的很是明白。

flex-grow

• 默認爲flex-grow:0，即，不擴大。原來是多大就是多大（flex-basic或者width、height的長度）
• 而後按照擴大因子按權分配。例若有50px沒有分配，兩個子元素flex-grow:分別爲flex-grow:3和flex-grow:2，那麼第一個元素就分配30px，第二個元素分配20px。
• 若是第一個元素設置flex-grow爲1，另外一個沒有設置，那麼多出來的所有的大小都會分配給第一個元素。

詳細仍是看30分鐘完全弄懂flex佈局講的很是明白。

flex

flex = flex-grow + flex-shrink + flex-basis
一些簡寫

flex: 1 = flex: 1 1 0%//
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // **經常使用於固定尺寸 不伸縮**

flex: 1和 flex: auto的區別

flex-grow + flex-shrink都是1的話意思就是無論是超出這一行，仍是小於這一行，都按比例佔滿這一行（放大或縮小元素）！！

flex:1 和 flex:auto 的區別
都是按比例放大縮小，而後佔滿一行。
其實能夠歸結於 flex-basis:0和flex-basis:auto的區別。

flex-basis是指定初始尺寸，當設置爲0時（絕對彈性元素），此時至關於告訴flex-grow和flex-shrink在伸縮的時候不須要考慮個人尺寸；相反當設置爲auto時（相對彈性元素），此時則須要在伸縮時將元素尺寸歸入考慮。
總結：

1. flex: 1的時候，伸縮時不須要考慮width，由於flex-basis:0（元素爲內容撐開的寬度），只須要按照元素的內容寬度進行等比例的伸縮。
2. flex: auto的時候，伸縮時須要考慮width，按照width進行等比例伸縮。

舉例：flex：1應用：

<ul id="container">
        <li id="item"></li>
        <li id="item"></li>
        <li id="item"></li>
    </ul>

#container{
    display: flex;
    flex-wrap: nowrap;
    width: 200px;
    height: 200px;
    background-color: orange;
}

#item:nth-child(1){
    flex:1;/*這裏*/
    width: 100px;

    height:100px;
    background-color: blue;
}
#item:nth-child(2){
    flex:1;/*這裏*/
    width:50px;

    height:100px;
    background-color: green;
}
#item:nth-child(3){
    /* flex:1; *//*這裏沒寫*/
    width:30px;

    height: 100px;
    background-color: #ccc;
}

前兩個元素將剩餘的空間平局分了，由於沒有內容，顯示的寬度都是0，因而兩個元素分得的擴大像素同樣，因此平分了。

而若是是flex：auto，那麼將會根據width按比例伸縮，佔滿一行。

flex佈局套路學習

Flex 佈局教程：實例篇