詳解flex:1什么意思

發(fā)布時間：2022-07-22 17:16:14 作者：陽庚

今天在做項目的時候遇到一個關(guān)于布局的問題, 就是 flex: 1，那么flex:1是什么意思，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

簡單的來說一下在別人問你這個問題的時候怎么來回答它

前端新人，如有錯誤求大佬指出~求教??

情景復(fù)現(xiàn)

大佬提問：“你知道flex: 1;的更深層次的內(nèi)容嗎？”

我的回答：

flex:1實際代表的是三個屬性的簡寫
flex-grow是用來增大盒子的，比如，當(dāng)父盒子的寬度大于子盒子的寬度，父盒子的剩余空間可以利用flex-grow來設(shè)置子盒子增大的占比
flex-shrink用來設(shè)置子盒子超過父盒子的寬度后，超出部分進(jìn)行縮小的取值比例
flex-basis是用來設(shè)置盒子的基準(zhǔn)寬度，并且basis和width同時存在basis會把width干掉

所以flex：1；的邏輯就是用flex-basis把width干掉，然后再用flex-grow和flex-shrink增大的增大縮小的縮小，達(dá)成最終的效果。

flex-grow:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-grow: 1;
    }
 
    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }
 
 
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子剩余空間的200

第一個盒子擴(kuò)大1/5，100+40 = 140
第二個盒子擴(kuò)大3/5，100+120=220
第三個盒子擴(kuò)大1/5，100+40= 140

flex-shrink:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 200px;
    }
 
    .box div:nth-child(1) {
      flex-shrink: 1;
    }
 
    .box div:nth-child(2) {
      flex-shrink: 2;
    }
 
    .box div:nth-child(3) {
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的寬度為500，子盒子的寬度為600，超出100，超出的100，如何進(jìn)行比例縮放

第一個盒子：1/4 * 100 = 25 最終第一個盒子200-25=175
第二個盒子：2/4 * 100 = 50 最終第二個盒子200-50 = 150
第三個盒子：1/4 * 100 = 25 最終第一個盒子200-25=175

flex-basis:0%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-basis: 50px;
    }
 
    .box div:nth-child(2) {
      flex-basis: 100px;
    }
 
    .box div:nth-child(3) {
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

這樣width的寬度就已經(jīng)被flex-basis:0%干掉了

到此這篇關(guān)于詳解flex:1什么意思的文章就介紹到這了,更多相關(guān)flex:1詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！