flex這些問題應該被理解

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