日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

flex 的 三個參數：flex-grow、flex-shrink、flex-basis

作者：潮汐未見潮落 更新時間： 2023-04-20 編程語言

前言：

之前對于 flex 布局沒有太深刻的理解，往往就只是給 父元素加上 display：flex? 屬性，在近期學習的過程中了解到 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性的縮寫，來看下面這一個例題，理解之后就能大部分掌握 flex 的三個屬性了

三個屬性的順序是?flex-grow、flex-shrink、flex-basis?

我的記憶方法是? G(干 )? S(傻 )? B ( 逼)? ?，哈哈哈，這樣是不是還挺好記的

但是下面文章講解的順序不按照這個來

?flex-basis

basis 的中文意思就是 基礎、基準 ，該屬性用來設置元素的寬度，通常情況下大家使用 width 設置寬度。但是如果元素上同時設置了 width 和 flex-basis ，那么 width 的值就會被 flex-basis 覆蓋掉。

<style>
    .father{
        display: flex;
        width:400px;
        height:200px;
      }
      .box{
          width:200px;
         height:100px;
         flex-basis:300px;
         background:blue;
      }
 </style>
<body>
<div class="father">
    <div class="box">
</div>

?可以看到給父元素添加 display：flex 屬性后讓其變成 flex 布局 ，子元素的?width?設置成 200 px ，flex-basis?設置成 300 px，最終顯示為 300px ，width 的值就被 flex-basis 覆蓋掉，這個屬性比較好理解

?flex-grow

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

假如設置父元素 400px，子元素 A 為100px，子元素 B 為 200px.則剩余空間為 100px

例子一：

A的 flex-grow 為 0，B的 flex-grow?為 0（即A、B不設置該屬性）

則A、B的實際寬度為他們本身的寬度，即A的實際寬度為100px? ；?B的實際寬度為200px

例子二：

A的 flex-grow 為1，B的 flex-grow為0（即不設置該屬性）

則A的實際寬度為 100px + 100px =200px? ? ；? B的實際寬度為 200px + 0 = 200px

例子三：

A的 flex-grow 為?1，B的 flex-grow 為 2

則 A 的實際寬度為 100px + 100px * 1/3 =? 400/3 px? ,?B的實際寬度為 200px + 100px * 2/3 = 800/3 px?

上面的 總系數為 1 + 2 = 3 ，然后按照 各元素的?flex-grow 的屬性值進行分配 A 1/3? ?B 2/3

?flex-shrink?

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

假如設置父元素 400px，子元素A為 200px，子元素B為 300px.則超出空間為 100px

例子一：

設置A的 flex-shrink 為 0，B的 flex-shrink 為 0

則A，B都不減小寬度，A、B的實際寬度為他們本身的寬度，即A的實際寬度為 200px? ；?B的實際寬度為 300px?

例子二：

A的 flex-shrink 為 0，B的 flex-shrink 為 1，則A不減小寬度，B減小

則A的實際寬度為他本身的寬度= 200px? ?，?B的實際寬度為 300px - 100px（超出的寬度）= 200px

例子三：

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

最終 B 的大小為 自身寬度 (300px)- B減小的寬度 (100px * (300px * 2/(200px* 3 + 300px* 2))) = 250px

?題目講解

看到這里，相信上面那一個例題大家應該會解了，下面我簡單說一下

?因為 flex的三個屬性依次為??flex-grow、flex-shrink、flex-basis?

根據?flex-basis?計算出，這里 兩個子元素的實際寬度 大于 父元素

所以?第一個 flex-grow 不用管，只看第二個 縮小的屬性 flex-shrink

簡要步驟如下（為了偷懶省略了單位 px， 問題不大）

?(1)計算超出父盒子的寬度：200 + 50 - 200 = 50
?(2).left需要減少：(50*2) / (50*2+200*1) * 50 = 50/3
???.right需要減少：(200*1)? / (50*2+200*1) * 50 = 100/3
?(3)最終 left? 寬度：50 - 50/3 = 100/3
?????最終 right 寬度：200 - 100/3 = 500/3
?(4) left 和 right 比例：?1:5? ? ? ? ??故選擇 B

?總結

?flex-basis：定義元素的基礎寬度

flex-grow：定義子元素的放大比例

  • 默認為0，即 即使存在剩余空間，也不會放大
  • 所有項目的flex-grow為1：等分剩余空間（自動放大占位）

flex-shrink：定義子元素的縮小比例；

  • 默認為1，即 如果空間不足，該項目將縮?。?/li>
  • 所有項目的 flex-shrink?為1：當空間不足時，縮小的比例相同；
  • flex-shrink 為 0：空間不足時，該項目不會縮??；

?幾個例子

flex: none

flex 取值為?none，則三個屬性依次為 0 0 auto，（不放大也不縮小）。如下是等同的

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

flex:auto

當?flex取值為?auto，則三個屬性依次為 1 1 auto（放大且縮小）。如下是等同的：

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

默認情況下?

flex 屬性的默認值為：0 1 auto （不放大會縮小）

注意：

flex:1? 不等于? flex: 1 1 auto ，flex:auto 才是? flex: 1 1 auto

flex:1 等同于下面的寫法 （ 放大且縮小并等分所有空間），但 flex:auto 和它的區別就是等分剩余空間 。

flex:1 等同于下面
flex-grow: 1
flex-shrink: 1
flex-basic: 0%

flex-basic 只要是 （number類型 + 單位）,?實現的效果都是所有空間等分

文章如有錯誤，懇請大家提出問題，本人不勝感激 。 不懂的地方可以評論，我都會 一 一回復

文章對大家有幫助的話，希望大家能動手點贊鼓勵，大家未來一起努力 長路漫漫，道阻且長

原文鏈接：https://blog.csdn.net/qq_52855464/article/details/126242117

欄目分類
最近更新