碼上歡樂
相關內容    簡體    繁體

css彈性盒子-------桃園三兄弟之：flex-grow、flex-shrink、flex-basis詳解

本文轉載自   查看原文   2020-04-14 14:00   790    CSS

flex-grow、flex-shrink、flex-basis三個屬性的作用：

在flex布局中，父元素在不同寬度下，子元素是如何分配父元素空間的。

(注意：這三個屬性都是在子元素上設置的，下面小編要講的是父元素，指以flex布局的元素(display:flex))

小編這里先教一下大家如何快速記住這三個屬性：

首先是   flex-basis  ，basis英文意思是<主要成分>，所以他和width放在一起時,肯定把width干掉，basis遇到width時就會說我才是最主要的成分，你是次要成分，所以見到我的時候你要靠邊站。

其次是   flex-grow，grow英文意思是<擴大，擴展，增加>,這就代表當父元素的寬度大於子元素寬度之和時，並且父元素有剩余，這時，flex-grow就會說我要成長，我要長大，怎么樣才能成長呢，當然是分享父元素的空間了。見下面第二個屬性的內容

最后是   flex-shrink， shrink英文意思是<收縮，>，這就代表當父元素的寬度小於子元素寬度之和時，並且超出了父元素的寬度，這時，flex-shrink就會說外面的世界太苦了，我還是回到父親的懷抱中去吧！因此，flex-shrink就會按照一定的比例進行收縮。見下面第三個屬性的內容

第一個屬性：flex-basis

該屬性用來設置元素的寬度，其實，width也可以設置寬度。如果元素上同時設置了width和flex-basis，那么width 的值就會被flex-basis覆蓋掉。

  1.  
    <style type="text/css" media="screen">
  2.  
    .box{
  3.  
    display: flex;
  4.  
    margin: 100px auto;
  5.  
    width: 400px;
  6.  
    height: 200px;
  7.  
    }
  8.  
    .inner{
  9.  
    width:200px;
  10.  
    height: 100px;
  11.  
    flex-basis:300px;
  12.  
    background:pink;
  13.  
    }
  14.  
    </style>
  15.  
    </head>
  16.  
    <body>
  17.  
    <div class="box">
  18.  
    <div class="inner">
  19.  
    </div>
  20.  
    </div>
  21.  
    </body>

見下圖：小編我把寬度設置為width:200px;  flex-basis:300px;結果顯示表明子元素.inner應用了屬性flex-basis;

第二個屬性：flex-grow

該屬性用來設置當父元素的寬度大於所有子元素的寬度的和時（即父元素會有剩余空間），子元素如何分配父元素的剩余空間。 flex-grow的默認值為0，意思是該元素不索取父元素的剩余空間，如果值大於0，表示索取。值越大，索取的越厲害。

 舉個例子: 父元素寬400px，有兩個子元素：A和B。A寬為100px，B寬為200px。 則空余空間為 400-（100+200）= 100px。 如果A，B都不索取剩余空間，則有100px的空余空間。

  1.  
    <body>
  2.  
    <div class="box">
  3.  
    <div class="inner">
  4.  
    </div>
  5.  
    <div class="inner1">
  6.  
    </div>
  7.  
    </div>
  8.  
    </body>
  1.  
    .box{
  2.  
    display: flex;
  3.  
    flex-direction: row;
  4.  
    margin: 100px auto;
  5.  
    width: 400px;
  6.  
    height: 200px;
  7.  
    border: 1px solid red;
  8.  
     
  9.  
    }
  10.  
    .inner{
  11.  
    flex-basis: 100px;
  12.  
    height: 100px;
  13.  
    background:pink;
  14.  
    }
  15.  
    .inner1{
  16.  
    flex-basis: 200px;
  17.  
    height: 100px;
  18.  
    background:blue;
  19.  
    }

見下圖：

 如果A索取剩余空間:設置flex-grow為1，B不索取。則最終A的大小為 自身寬度（100px）+ 剩余空間的寬度（100px）= 200px 。

  1.  
    .inner{
  2.  
    flex-basis:100px;
  3.  
    height:100px;
  4.  
    background:pink;
  5.  
    flex-grow:1;
  6.  
    }
  7.  
    .inner1{
  8.  
    flex-basis:200px;
  9.  
    height:100px;
  10.  
    background:blue;
  11.  
    }

見下圖：

如果A，B都設索取剩余空間，A設置flex-grow為1，B設置flex-grow為2。則最終A的大小為 自身寬度（100px）+ A獲得的剩余空間的寬度（100px (1/(1+2))）,最終B的大小為 自身寬度（200px）+ B獲得的剩余空間的寬度（100px (2/(1+2))）(這里呢小編只給了公式，小伙伴們可以自己去算一下)

  1.  
    .inner{
  2.  
    flex-basis: 100px;
  3.  
    height: 100px;
  4.  
    background:pink;
  5.  
    flex-grow: 1;
  6.  
    }
  7.  
    .inner1{
  8.  
    flex-basis: 200px;
  9.  
    height: 100px;
  10.  
    background:blue;
  11.  
    flex-grow: 2;
  12.  
    }

見下圖：

第三個屬性：flex-shrink

該屬性用來設置，當父元素的寬度小於所有子元素的寬度的和時（即子元素會超出父元素），子元素如何縮小自己的寬度的。 flex-shrink的默認值為1，當父元素的寬度小於所有子元素的寬度的和時，子元素的寬度會減小。值越大，減小的越厲害。如果值為0，表示不減小。

 舉個例子: 父元素寬400px，有兩子元素：A和B。A寬為200px，B寬為300px。 則A，B總共超出父元素的寬度為(200+300)- 400 = 100px。 如果A，B都不減小寬度，即都設置flex-shrink為0，則會有100px的寬度超出父元素。 

  1.  
    .box{
  2.  
    display: flex;
  3.  
    flex-direction: row;
  4.  
    margin: 100px auto;
  5.  
    width: 400px;
  6.  
    height: 200px;
  7.  
    border: 1px solid red;
  8.  
     
  9.  
    }
  10.  
    .inner{
  11.  
    flex-basis: 200px;
  12.  
    height: 100px;
  13.  
    background:black;
  14.  
    flex-shrink: 0;
  15.  
    }
  16.  
    .inner1{
  17.  
    flex-basis: 300px;
  18.  
    height: 100px;
  19.  
    background:blue;
  20.  
    flex-shrink: 0;
  21.  
     
  22.  
    }

見下圖：

如果A不減小寬度:設置flex-shrink為0，B減小。則最終B的大小為 自身寬度(300px)- 總共超出父元素的寬度(100px)= 200px 

  1.  
    .inner{
  2.  
    flex-basis: 200px;
  3.  
    height: 100px;
  4.  
    background:black;
  5.  
    flex-shrink: 0;
  6.  
    }
  7.  
    .inner1{
  8.  
    flex-basis: 300px;
  9.  
    height: 100px;
  10.  
    background:blue;
  11.  
    flex-shrink: 1;
  12.  
     
  13.  
    }

見下圖：

如果A，B都減小寬度，A設置flex-shirk為3，B設置flex-shirk為2。則最終A的大小為 自身寬度(200px)- A減小的寬度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,最終B的大小為 自身寬度(300px)- B減小的寬度(100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px

  1.  
    .inner{
  2.  
    flex-basis: 200px;
  3.  
    height: 100px;
  4.  
    background:black;
  5.  
    flex-shrink: 3;
  6.  
    }
  7.  
    .inner1{
  8.  
    flex-basis: 300px;
  9.  
    height: 100px;
  10.  
    background:blue;
  11.  
    flex-shrink: 2;
  12.  
     
  13.  
    }

見下圖：

這里小編明確一點，flex是flex-grow，flex-shrink,  flex-basis  (注意小編寫的順序)縮寫形式，大家可以記一下下面的縮寫規則：

如：flex 取值為 none，則計算值為 0 0 auto，如下是等同的：

  1.  
    .item {flex: none;}
  2.  
    .item {
  3.  
    flex-grow: 0;
  4.  
    flex-shrink: 0;
  5.  
    flex-basis: auto;
  6.  
    }

當 flex取值為 auto，則計算值為 1 1 auto，如下是等同的：

  1.  
    .item {flex: auto;}
  2.  
    .item {
  3.  
    flex-grow: 1;
  4.  
    flex-shrink: 1;
  5.  
    flex-basis: auto;
  6.  
    }

當 flex 取值為一個非負數字，則該數字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item{flex: 1;}

.item{flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}

當 flex 取值為一個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink取 1，有如下等同情況（注意 0% 是一個百分比而不是一個非負數字）：

 

  1.  
    .item-1{flex: 0%;}
  2.  
    .item-1{ flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}
  3.  
    .item-2{flex: 24px;}
  4.  
    .item-2{ flex-grow: 1; flex-shrink: 1; flex-basis: 24px;}

當 flex取值為兩個非負數字，則分別視為 flex-grow和 flex-shrink的值，flex-basis取 0%，如下是等同的：

  1.  
    .item{flex: 2 3;}
  2.  
    .item{ flex-grow: 2; flex-shrink: 3; flex-basis: 0%;}
  3.  
    當 flex取值為一個非負數字和一個長度或百分比，則分別視為 flex-grow和 flex-basis的值，flex-shrink取 1，如下是等同的：
  4.  
    .item{flex: 2333 3222px;}
  5.  
    .item{ flex-grow: 2333; flex-shrink: 1; flex-basis: 3222px;}
  6.  
     
另；

flex-grow 屬性

flex-grow 不支持負值，默認值是 0，表示不占用剩余空間來擴展自己的寬度。如果 flex-grow 大於 0，則 flex 容器剩余空間的分配就會發生：

 

如果只有一個 flex 元素設置了 flex-grow 屬性值：
a. 如果flex-grow值小於1，則分配給它的是總剩余空間和這個比例的計算值。例如一個 0.5 的元素能分到一半的剩余空間。
b. 如果flex-grow值大於1，則獨享所有剩余空間。
如果有多個 flex 元素設置了 flex-grow 屬性值：
a. 如果 flex-grow 值總和小於1，則分配給元素的是總剩余空間和當前元素設置的 flex-grow 比例的計算值。例如一個 0.1 和一個 0.2 的元素，只能分別分到 1/10 和 2/10 的剩余空間，剩下的剩余空間並不會分配給它們。
b. 如果 flex-grow 值總和大於1，則所有剩余空間被利用，分配比例就是 flex-grow 屬性值的比例。
 
————————————————
版權聲明：本文為CSDN博主「貓子豬」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u012372720/article/details/93998972



轉載文章；https://blog.csdn.net/m0_37058714/article/details/80765562

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css3 flex屬性flex-grow、flex-shrink、flex-basis學習筆記 關於flex:1詳解(用來設置 flex-grow, flex-shrink 與 flex-basis。) 深入理解css3中的flex-grow、flex-shrink、flex-basis （轉） react native Flex布局以及flex-grow、flex-shrink、flex-basis使用 彈性布局flex-grow和flex-shrink CSS3中flex布局的flex-basic、flex-grow、flex-shrink 對flex-grow和flex-shrink的深入理解 CSS：flex布局中的flex-grow詳解 display:flex 的彈性盒子中，flex-grow:2 不生效的解決方法 flex布局之flex-shrink
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM