關於css的display:flex;flex:grow,flex:shrink

flex佈局在開發中的做用：

1.解決之前須要用定位position,浮動float,百分比%來解決的佈局問題，
2.解決之前比較難以把握的垂直居中問題vertical-align

面試中很容易碰到一個題：

左邊200px,右邊佔滿整屏

之前的寫法，會用到左邊寫固定200px,後邊的元素margin-left:200px,而後加上浮動float，有了flex以後呢，寫法很是方便

.left
    width 200px
.right
    flex 1

自動佔滿剩餘的空間,是否是特別6，固然這個是題外話，咱們要學的是flex:grow,flex:shrink

flex: grow

MDN是這樣描述的：

CSS屬性 flex-grow設置了一個flex項 主尺寸的flex增加係數。它指定了flex容器中剩餘空間的多少應該分配給項目（flex增加係數）。

怎麼樣，看懂了嗎，我本身看了也暈，仍是來些栗子吧

section
    div.left
    div.center
    div.right

section
    display flex
    width 600px
    height 100px
    .left
        flex-grow 1
        width 100px
        background red
    .center
        flex-grow 2
        width 200px
        background yellow
    .right
        flex-grow 3
        width 16px
        background green

上面這個栗子在實際運行中，會是怎樣呢

是否是有點意思呢，寬度都按特定的比例拉伸了，這就是咱們flex：grow的功效了

• 在子元素的flex-grow加起來大於1的時候，要算出實際寬度。
• 首先計算出子元素相對父元素的剩餘寬度，在這裏是600-100-200-16=284
• 計算第一個方塊的實際寬度：284*1(flex-grow)/6(子元素flow-grow總和)+100(樣式定義的width)=147.33，第二個跟第三個不妨本身試着算算

flex-grow還有一種狀況是，flow-grow總和小於1的狀況，這時候算法跟上面有所不一樣:

栗子：仍是拿上面栗子來看，把flow-grow的值所有改成0.n，相對應

.left
    flex-grow 0.1
    width 100px
    background red
.center
    flex-grow 0.2
    width 200px
    background yellow
.right
    flex-grow 0.3
    width 16px
    background green

試着想想會獲得什麼樣的一個佈局呢，
看圖，我已經放在下面了

當子元素的flow-grow加起來不足1的時候，這時候，父元素就會有空間不被佔滿，那麼這個時候得子元素實際寬度是多少呢：

• 在子元素的flex-grow加起來小於1的時候，要算出實際寬度。
• 首先計算出子元素相對父元素的剩餘寬度，在這裏是600-100-200-16=284
• 計算第一個方塊的實際寬度：284*0.1(flex-grow)/1(子元素flow-grow總和)+100(樣式定義的width)=128.4，第二個跟第三個不妨本身試着算算

固然啦，這個flex-grow的值是被min/max-width的影響的，本身實際運用的時候要注意哦

flex:shrink

CSS flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 的值。

一樣附上MDN關於flex:shrink的描述。。哈哈

flex:grow是拉伸填補空位，那麼flex:shrink則是相對立的，它會收縮哦，也就是子元素的寬度要大於父元素的寬度

一樣咱們也來上一個栗子：
仍是沿用上面的代碼，可是咱們得修改下css

.left
    flex-shrink 1
    width 200px
    background red
.center
    flex-shrink 2
    width 300px
    background yellow
.right
    flex-shrink 3
    width 160px
    background green

相信聰明的你已經發現了吧，沒錯，200+300+160=660，這個值已經超出了父容器的600寬度了，這個時候，在實際運行中會是怎樣的呢：

依舊來張圖吧~

怎麼樣，都按照必定的比例本身收縮了吧，是否是很神奇~

flex:shrink跟flex:grow的算法仍是有必定差別的，這裏有幾個數值要注意(溢出值，總寬度)：

• 先計算出子元素的溢出值 200+300+160-600=60。
• 而後計算子元素的總寬度，2001+3002+160*3=1280
• 計算第一個方塊的實際寬度：200 - 601(flex-shrink)200(width)/1280=190.62，第二個跟第三個不妨本身試着算算

這個算法是否是有點很差理解呢，其實總寬度就是把flex:shrink看成是份額，子元素是每一份，每一份*份額再相加，這樣就算出了總寬度；而後再算出溢出值在每一個子元素中佔的份額，再用子元素的實際寬度減去溢出份額就獲得實際寬度啦~

固然了，flex:shrink也有小於1的狀況，思考下，若是shrink大於1的狀況，通過縮小恰好跟總寬度相等；那麼若是小於1的時候會出現什麼狀況呢

來了來了他來了，

小於1的狀況，子元素得不到充分的縮比，依舊會伸到容器外部

194.38 + 283.12 + 146.5 = 624，怎麼樣，雖然這個時候子元素依然有縮小，可是依舊大於父容器的600，神奇吧

那麼，這個時候是怎麼計算的實際寬度呢：

• 先計算出子元素的溢出值 200+300+160-600=60
• 而這個時候得溢出值已經不能拿來直接計算了,由於子元素的flex-shrink的總和沒有1，只有0.6，此時的溢出值要用60*0.6=36來計算了
• 而後計算子元素的總寬度，2000.1+3000.2+160*0.3=128
• 計算第一個方塊的實際寬度：200 - 360.1(flex-shrink)200(width)/128=194.38，第二個跟第三個不妨本身試着算算

固然啦，flex-shrink也會受到max/min-width的影響哦

到此就結束了，你們能夠根據本身的理解寫個demo加深下記憶哦，謝謝

碼農進階題庫,天天一道面試題 or Js小知識 https://www.javascriptc.com/interview-tips/

❤️ 看完兩件小事

若是你以爲這篇文章對你挺有啓發，我想請你幫我兩個小忙：

把這篇文章分享給你的朋友 / 交流羣，讓更多的人看到，一塊兒進步，一塊兒成長！

關注公衆號 「IT平頭哥聯盟」，公衆號後臺回覆「資源」 免費領取我精心整理的前端進階資源教程

JS中文網 - 前端進階資源教程 www.javascriptC.com
一個致力於幫助開發者用代碼改變世界爲使命的平臺，天天均可以在這裏找到技術世界的頭條內容