深入理解 flex-grow & flex-shrink & flex-basis

libin19890520 發布于2019-08-01 15:40 / 531人閱讀

摘要：前言有三個屬性值，分別是，，，默認值是。的寬度分別是，父級的寬度是，父級寬減去子級的全部寬度，這樣剩余空間就是。當然工作中最好用，更符合規范。如果父級的空間不夠有效，無效。

前言

flex 有三個屬性值，分別是 flex-grow， flex-shrink， flex-basis，默認值是 0 1 auto。發現網上詳細介紹他們的文章比較少，今天就詳細說說他們，先一個一個看。

flex-grow

定義項目的放大比例，默認值為0，就算存在剩余空間，也不會放大。單單幾句話肯定不能表達出意思，來看個DEMO。

flex-grow

flex-grow的默認值為0，如果沒有定義該屬性，是不會擁有分配剩余空間的權利的。A, B, C, D, E 的寬度分別是 100, 120, 130, 100, 100，父級的寬度是660，父級寬減去子級的全部寬度，這樣剩余空間就是110。例子中B, C定義了flex-grow，分別是1，2，那剩余空間分成3份，B1份，C2份，比例就是1：2，分配計算出來的值就是B :36.666666666666664, C：73.33333333333333。這個時候剩余空間就被計算出來了，相加后的結果就是B：156.66666666666666，C：203.33333333333331。

B的計算公式：120 + (110 / 3) * 1

C的計算公式: 130 + (110 / 3) * 2

flex-shrink

定義項目的縮小比例，默認值為1，注意前提是空間不足的情況下，看例子。

flex-shrink

這里 A, B, C 的寬度分別是155, 200, 50，(注意這里的寬度我是用flex-basis代替的，在這個例子中和width的作用是一樣的)。父級寬度是300，計算超出的空間就是 -105，這樣超出的 105px 就要被 A, B, C 消化掉，比例是2：1：1。

如何消化？首先是每個項目的wdith值乘以flex-shrink值求積，

A：(155 * 2) = 310
B：(200 * 1) = 200
C：(50 * 1) = 50。

然后再求和所有項目的乘積。

(310 + 200 + 50) = 560

得到求占比之后還要乘以要騰出的空間。

A：(310 / 560) * 105 = 58.125
B：(200 / 560) * 105 = 37.5
C：(50 / 560) * 105 = 9.375

得到每一項要騰出的空間後然後

A：(155 - 58.125) = 96.875
B：(200 - 37.5) = 162.5
C：(50 - 9.375) = 40.625

好了，這樣就得出計算后的寬度了。

flex-basis

和width一樣，他的默認值為auto，把上面幾個例子換成width也是一樣的。當然工作中最好用flex-basis，更符合規范。

總結

如果父級的空間足夠：flex-grow有效，flex-shrink無效。

如果父級的空間不夠：flex-shrink 有效，flex-grow無效。

如果你有疑問歡迎討論，一起學習。

原文：https://xiecg.github.io/2016/...

云服務器 GPU云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50035.html

深入理解 flex-grow &amp; flex-shrink &amp; flex-basis

摘要：前言有三個屬性值，分別是，，，默認值是。的寬度分別是，父級的寬度是，父級寬減去子級的全部寬度，這樣剩余空間就是。當然工作中最好用，更符合規范。如果父級的空間不夠有效，無效。前言 flex 有三個屬性值，分別是 flex-grow， flex-shrink， flex-basis，默認值是 0 1 auto。發現網上詳細介紹他們的文章比較少，今天就詳細說說他們，先一個一個看。 fl...

Richard_Gao 2019-08-29 11:10 評論0 收藏0
深入理解Flex布局 -- flex-grow &amp; flex-shrink &amp; fl

摘要：我希望實現一個左中右三列的布局，其中左右部分固定寬度，中間部分自適應實現起來很簡單，代碼如下到此為止一切都很美好。解決方法是給加上此時的完整代碼如下寬度為的內容完整的在這里實戰經驗到此結束，下面我們再深入學習涉及到的知識點。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言最近在項目...

sydMobile 2019-08-30 15:55 評論0 收藏0
CSS6：flex布局

摘要：主要用來做橫向的布局。元素的布局學習我分成兩個部分，第一個部分是元素布局。以下幾個屬性影響著元素的布局。詳細還是看分鐘徹底弄懂布局講的非常明白。的時候，伸縮時需要考慮，按照進行等比例伸縮。布局套路學習布局教程實例篇前言：這是我看過最好的flex布局教程：30分鐘徹底弄懂flex布局傳統的布局方法與flex屬性通覽 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 評論0 收藏0