flex三連問，幫助我們更好的理解布局利器
問題：
- flex的值 auto, none, 0, 1, initial分別是什么？有什么作用？有什么表現？
- flex-basis和width的區別？單值flex-basis：0與auto的區別？flex-basis：100px與width：100px一樣嗎？
- 怎樣理解剩余空間？
解決：
問題一：
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，因為多數情況，我們都是在默認值上修改，其他再不容易記的東西，也會有了參照而變得游刃有余，
上述五種情況的作用及表現什么？
- flex：initial（默認值）
-
父盒子設定為彈性盒，子元素默認就為initial，一般用于還原默認值
-
表現為不會隨之增大，會隨之減小，寬度參照自身
- flex：1
-
一般用于等分（分配剩余空間后，表現為等分）
-
表現為會隨之增大，會隨之減小，寬度內容區最小寬度（分配剩余空間前）
- flex：0
-
不常用
-
表現為不會隨之增大，會隨之減小，寬度內容區最小寬度（分配剩余空間后）
- flex：auto
-
一般用于文字越長，元素越寬的場景
-
表現為會隨之增大，會隨之減小，寬度參照自身
- 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=== 元素100pxcontent+flex-basis：100px===max（content，flex-basis：100px） >= 元素100px
-
剖析一下，有以下兩種情況：
-
元素flex-basis為auto時，width設為100px，那么當縮小彈性盒時，元素始終為100px，不會變化，那么如果該元素內容區寬度超過100px（比如內嵌的圖片，font-size大小等），那么也不會撐大該元素，它就是個定值100px
-
元素flex-basis不為auto時，width設為多少都沒用，優先取flex-basis的值，若flex-basis為100px，那么如果該元素內容區寬度超過100px（比如內嵌的圖片，font-size大小等），那么與設定width結果相反，會撐大該元素，最后計算的寬度會大于100px，
-
-
width就是寫死，無論怎么變，該元素就是這么寬；flex-basis意思是，元素大概是這么寬，如果有意外情況，那么我還會改變，
-
舉個小栗子幫助理解下：你晚上在加班，女朋友要讓你陪她一個小時，但是女人的嘴，騙人的鬼，指不定耽誤多長時間呢，然后，，，
-
width的理解：我是個負責任的男人，一個小時一分不多一分不少，不會因為任何說法改變這一個小時，
-
flex-basis的理解：女朋友比任何事都重要，如果她不鬧騰，那么一個小時就準時結束，否則，我只能由著她的性子來了，唉，折騰到明早也有可能，沒辦法，誰讓她最重要呢？
-
-
問題三：
怎樣理解剩余空間？
-
開啟彈性盒的元素的寬度為總空間
-
去掉所有子元素的固定寬度后，剩余的空間就叫做剩余空間
-
子元素有width屬性，那么去掉width就是剩余空間
-
子元素有flex-basis：100px
-
如果100px小于總寬度，那么去掉flex-basis就是剩余空間
-
如果100px大于總寬度，那么沒有剩余空間
-
如果縮減系數flex-shrink為0，那么元素就是100px，表現為超出父盒子
-
如果縮減系數flex-shrink不為0，元素的最終寬度也要少于100px
-
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/455427.html
標籤：Html/Css
上一篇：CSS第一天