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

問題：

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

解決：

問題一：

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

成都創(chuàng)新互聯(lián)服務項目包括瀘州網(wǎng)站建設、瀘州網(wǎng)站制作、瀘州網(wǎng)頁制作以及瀘州網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，瀘州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到瀘州省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

• 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。因為多數(shù)情況，我們都是在默認值上修改，其他再不容易記的東西，也會有了參照而變得游刃有余。

上述五種情況的作用及表現(xiàn)什么？

1. flex：initial（默認值）

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

• 表現(xiàn)為不會隨之增大，會隨之減小，寬度參照自身

2. flex：1

• 一般用于等分（分配剩余空間后，表現(xiàn)為等分）

• 表現(xiàn)為會隨之增大，會隨之減小，寬度內(nèi)容區(qū)最小寬度（分配剩余空間前）

3. flex：0

• 不常用

• 表現(xiàn)為不會隨之增大，會隨之減小，寬度內(nèi)容區(qū)最小寬度（分配剩余空間后）

4. flex：auto

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

• 表現(xiàn)為會隨之增大，會隨之減小，寬度參照自身

5. flex：none

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

• 表現(xiàn)為不會隨之增大，不會隨之減小，寬度參照自身

問題二：

flex-basis和width的區(qū)別？單值flex-basis：0與auto的區(qū)別？

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

• flex-basis比width優(yōu)先級更高；

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

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

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

• 首先說結(jié)論，不一樣?。?！

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

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

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

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

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

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

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

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

問題三：

怎樣理解剩余空間？

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

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

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

• 子元素有flex-basis：100px

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

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

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

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