flex三連問，幫助我們更好的理解布局利器

問題：

1. flex的值 auto, none, 0, 1, initial分別是什么？有什么作用？有什么表現？
2. flex-basis和width的區別？單值flex-basis：0與auto的區別？flex-basis：100px與width：100px一樣嗎？
3. 怎樣理解剩余空間？

解決：

問題一：

flex的值 auto, none, 0, 1, initial分別是什么？

• flex: auto 為 1 1 auto

• flex: none為 0 0 auto

• flex: 0為 0 1 0

• flex: 1為 1 1 0

• flex: initial為 0 1 auto

提一嘴，我認為重要的是這個flex的默認值，也就是initial。因為多數情況，我們都是在默認值上修改，其他再不容易記的東西，也會有了參照而變得游刃有余。

上述五種情況的作用及表現什么？

1. flex：initial（默認值）

• 父盒子設置為彈性盒，子元素默認就為initial，一般用于還原默認值

• 表現為不會隨之增大，會隨之減小，寬度參照自身

2. flex：1

• 一般用于等分（分配剩余空間后，表現為等分）

• 表現為會隨之增大，會隨之減小，寬度內容區最小寬度（分配剩余空間前）

3. flex：0

• 不常用

• 表現為不會隨之增大，會隨之減小，寬度內容區最小寬度（分配剩余空間后）

4. flex：auto

• 一般用于文字越長，元素越寬的場景

• 表現為會隨之增大，會隨之減小，寬度參照自身

5. flex：none

• 一般用于保持元素自身寬度，且文字不換行

• 表現為不會隨之增大，不會隨之減小，寬度參照自身

問題二：

flex-basis和width的區別？單值flex-basis：0與auto的區別？

• 兩者都是用于改變彈性盒元素的寬度

• flex-basis比width優先級更高；

  • 如果flex-basis為auto，那么元素就會參照width

  • 如果flex-basis不為auto（如：0，200px等），那么元素就會忽略width（即使你設置了width），采用flex-basis的值

flex-basis：100px與width：100px（彈性盒可縮減為前提條件）一樣嗎？

• 首先說結論，不一樣！！！

  • width：100px + flex-basis：auto === 元素100px
  • content + flex-basis：100px === max（content， flex-basis：100px） >= 元素100px

• 剖析一下，有以下兩種情況：

  1. 元素flex-basis為auto時，width設為100px，那么當縮小彈性盒時，元素始終為100px，不會變化。那么如果該元素內容區寬度超過100px（比如內嵌的圖片，font-size大小等），那么也不會撐大該元素，它就是個定值100px

  2. 元素flex-basis不為auto時，width設為多少都沒用，優先取flex-basis的值。若flex-basis為100px，那么如果該元素內容區寬度超過100px（比如內嵌的圖片，font-size大小等），那么與設置width結果相反，會撐大該元素，最后計算的寬度會大于100px。

• width就是寫死，無論怎么變，該元素就是這么寬；flex-basis意思是，元素大概是這么寬，如果有意外情況，那么我還會改變。

  • 舉個小栗子幫助理解下：你晚上在加班，女朋友要讓你陪她一個小時，但是女人的嘴，騙人的鬼，指不定耽誤多長時間呢。然后。。。

    • width的理解：我是個負責任的男人，一個小時一分不多一分不少，不會因為任何說法改變這一個小時。

    • flex-basis的理解：女朋友比任何事都重要，如果她不鬧騰，那么一個小時就準時結束，否則，我只能由著她的性子來了。唉，折騰到明早也有可能，沒辦法，誰讓她最重要呢？

問題三：

怎樣理解剩余空間？

1. 開啟彈性盒的元素的寬度為總空間

2. 去掉所有子元素的固定寬度后，剩余的空間就叫做剩余空間

• 子元素有width屬性，那么去掉width就是剩余空間

• 子元素有flex-basis：100px

  • 如果100px小于總寬度，那么去掉flex-basis就是剩余空間

  • 如果100px大于總寬度，那么沒有剩余空間

    • 如果縮減系數flex-shrink為0，那么元素就是100px，表現為超出父盒子

    • 如果縮減系數flex-shrink不為0，元素的最終寬度也要少于100px