flex佈局筆記

這篇筆記是在讀完阮一峯老師的flex語法和{前端開發}的flex設置成1和auto有什麼區別的兩篇博客後本身記錄的佈局思想和遇到的問題。
附上連接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.javashuo.com/article/p-rxguzxpa-v.html

1.容器屬性

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

Flex-flow是direction和wrap的簡寫。

通常默認關注direction，不關注wrap，wrap通常都是換行的。

2. 肯定主軸和肯定主軸上的項目排列

而direction就是肯定主軸，有row,column還有他們的reverse。也就是橫着豎着還有他們的倒着。

主軸肯定了下一步能夠肯定他們的項目在主軸用什麼樣的格式排列在主軸上（左右向）前提主軸是row，若是主軸是column，則相反

因此就有justify-content這個屬性，不展開了，五個屬性能夠看阮老師的文章。

3.肯定軸的對齊方式

用align-content這個屬性，一樣有五個，他們能夠在主軸不惟一的時候讓主軸們看起來不同，讓他們大塊的動。

4.肯定主軸項目的上下方向的格式(項目交叉軸上的格式)

align-items這個屬性，讓項目在上下方向的進行格式的操做。（默認主軸是row，也就是主軸是橫向的，若是是column則相反）不展開說了。

5.肯定項目的屬性

order這個屬性不是很重要，由於通常排序的話在html直接作出來了，沒必要要拿到css排序。

項目變大縮小還有基礎大小(暫時叫基礎大小)的三個屬性flex-grow,flex-shrink,flex-basis

默認值是0，1，auto

關於grow和shrink來講，只須要關注他們在父組件大小中是否有餘地或者沒有餘地時會不會變換寬度便可，變換的話就是1，不變的話就是0。

對於basis這個屬性，默認是auto。阮老師給出的結論是在分配多餘空間以前，項目佔據的主軸空間，因此也就是說basis是在父組件有多餘的地方的時候配合grow纔會顯出做用的。

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>
<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        flex: 2 1 0%;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 0%;
        background: lightblue;
    }
</style>

假設由上面這三個結構他們的basis都是0%，他們的flex-grow爲2,2,1。

如今進行三個步驟來計算他們最終要佔多大地方

• 計算三個子組件basis的合

  • 都是百分之0，那合就是0px

• 計算剩餘的分配空間

  • 父組件是600px，三個子組件的basis之和爲0，因此剩餘可分配的就是600-0=600px

• 分配剩餘空間

  • Item1 = (600/5*2)=240
  • Item2 = (600/5*2)=240
  • item3= (600/5*1)=120

  他們基礎都爲0，因此他們最後的寬度爲240，240，120

那麼其餘配置不變，item-1 width=140px，item-2的basis變成auto，width=100px。item-3的basis變成200px；

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width：140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width：100px;
        flex: 2 1 auto%;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>

則仍是按照剛纔的三部走

• 計算三個子組件basis的合
  • Basis爲0%，auto，200px。那麼item-1的就變成0px,item-2的變成了100px，和原尺寸同樣，item-3的爲200px.則他們的合爲300px.
• 計算剩餘的分配空間
  • 600-300=300px
• 分配剩餘空間
  • item-1分配到300/5*2=120
  • item-2分配一樣爲120
  • item-3分配到60
• 他們基礎分別爲0，100，200。加上他們分配到剩餘的就爲120，220，260

6.flex的簡寫

//不寫flex
flex: 0 1 auto;

//flex:none;
flex: 0 0 auto;

//flex:auto;
flex: 1 1 auto;

//flex:1;
flex:1 1 0%;

//flex: 0%;
flex:1 1 0%;

//flex:24px;
flex:1 1 24px;

//flex: 2 3;
flex: 2 3 0%;