眾所周知，flex屬性是flex-grow、flex-shrink和flex-basis屬性的簡稱。其默認值為0 1 auto，這意味著

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

但是我注意到，在很多地方使用了flex: 1。是1 1自動還是1 0自動的簡寫？我不明白這是什么意思，當我谷歌的時候我什么也沒得到。

flex: 1的含義如下:

flex-grow : 1;    ? The div will grow in same proportion as the window-size       
flex-shrink : 1;  ? The div will shrink in same proportion as the window-size 
flex-basis : 0;   ? The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

以下是解釋:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex:& lt；正數& gt 相當于flex:& lt；正數& gt1 0.使彈性項目具有靈活性，并將彈性基準設置為零，從而使項目 接收flex中指定比例的可用空間 集裝箱。如果flex容器中的所有項目都使用這種模式，它們的 尺寸將與指定的伸縮系數成比例。

因此，flex:1相當于flex: 1 1 0

在某些瀏覽器中:

flex:1；不等于flex:1 1 0；

flex:1；= flex:1 1 0n；(其中n是長度單位)。

flex-grow:一個數字，用于指定該項相對于其余靈活項的增長量。 flex-shrink一個數字，指定該項目相對于其余靈活項目的收縮量 項目的長度。合法值:& quot自動& quot，& quot繼承& quot，或一個后跟& quot% & quot，& quotpx & quot，& quotem & quot或者任何其他長度單位。 這里的關鍵點是flex-basis需要一個長度單位。

例如在Chrome中，flex:1和flex:1 1 0會產生不同的結果。在大多數情況下，flex:1 1 0；是可行的，但是讓我們來看看到底發生了什么:

例子 忽略伸縮基準，僅應用伸縮增長和伸縮收縮。

flex:1 1 0；= flex:1 1；= flex:1；

然而，如果容器的應用單元是嵌套的，這乍看起來似乎是可以的；期待意想不到的事情！

在CHROME中試試這個例子

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

我也對flex: 1感到困惑，所以我將在這里分享我對這個屬性的理解:)

為了理解flex: 1的概念，首先我們必須確保父元素的display屬性設置為flex，即display: flex。現在，父元素中嵌套的彎曲元素可以使用flex: 1。

現在的問題是，這對彎曲的元素會有什么影響？如果一個元素具有flex: 1，這意味著所有其他元素的大小將與其內容具有相同的寬度，但是具有flex: 1的元素將具有剩余的完整空間。請參見下圖。

在Chrome Ver 84中，flex: 1相當于flex: 1 1 0%。以下是一堆截圖。

默認值設置為1 1 0%(分別是flex-grow flex-shrink flex-basis的簡寫值)，可能是因為這些值對& quotflex & quot項目。這些值的確切含義如下:

flex-basis:它指定了項目的理想大小。理想意味著& quot假設既沒有任何多余的空間，也沒有任何空間短缺& quot。0%意味著我們沒有理想的大小，我們希望他們的大小真正靈活。我們希望它們自動調整大小(因此單詞& quot靈活& quot)基于可用空間。 flex-grow:在考慮flex-basis之后，如果有剩余的額外空間，它指定如何& quot額外的空間& quot(請注意，我們不是在談論整個空間)必須在項目之間劃分。具有較高彎曲生長的那些將吃掉更多的額外空間。在默認情況下，對所有項目使用相同的flex-grow是有意義的，這樣所有項目將擁有相同份額的額外空間。當flex-basis為0%時，所有項目的flex-grow為1會使它們相除& quot容器的整個空間& quot(因為flex-basis不使用空間，所以額外的空間等于容器的整個空間)。 flex-shrink:在考慮了flex-basis之后，如果可用空間不夠，它指定如何& quot空間的短缺& quot(同樣，不是整個空間)必須在項目之間劃分(強加)。具有較高伸縮性的那些將不得不& quot忍受& quot更多的短缺。 示例: 彈性基礎3個項目的彈性基礎為400像素，這意味著我們寧愿有3個項目，每個項目的寬度為400像素?，F在，將會發生什么: 如果我們有多余的空間？假設容器寬度為1500像素。這三個項目將占用1200個像素，那么多出來的300個像素該怎么辦呢？ 如果我們的集裝箱空間不足？例如，如果在1500px容器中有5個400像素的項目(短缺= |1500px - 5 * 400px| = 500px)。 以上兩個問題的答案分別是flex-grow(第一個問題的答案)和flex-shrink(第二個問題的答案)。 例如，如果三個項目中的一個具有5的彈性增長，而其他項目仍然是它們的默認值(即1)，會怎么樣？那么flex-grow為5的那個將獲得(300px / (1+1+5)) * 3的額外空間。

另一個有用的例子是，如果您有一個flex容器，并且您希望每個子容器正好占據父容器的整個寬度(例如，一個圖像轉盤)，在這種情況下，您可以在所有子容器上使用flex: 0 0 100%,這樣項目將有一個flex基礎，即占據父容器的整個寬度，并關閉它們的增長/收縮。

flex: 1將flex-grow設置為1(而默認值為0)。

這有什么作用:

如果所有項都將flex-grow設置為1，則 容器將平均分配給所有孩子。如果其中一個 children的值為2，剩余空間將占用兩倍 和其他人一樣大的空間(或者至少它會努力這么做)。

(來源:CSS招數)

在具有無單位數的單值flex語法的情況下(而不是flex-basis的值，另一個選項)，

...它被解釋為flex:& lt；編號& gt1 0;這 假設伸縮值為1，伸縮基準值為 假設為0。

(資料來源:MDN)

如果對作為flex父項的每個元素使用flex :1，則所有項將具有相同的寬度。

flex屬性是flex-grow、flex-shrink和flex-basis的簡寫。

但是如果flex屬性只有一個值，那么它只設置& quot靈活增長& quot和其他屬性被省略，因此它們將獲得默認值。(不是初始值)

對于flex:1；

flex-grow ->用戶定義= 1(高于該值)

伸縮->；省略時默認為1。(初始為0)

彈性基礎->；省略時默認為0。(首字母為自動)

如果在flex容器中使用flex:1，那么所有的flex項目將占用相同的空間。

如果您在特定的flex項目中使用flex:1，那么該flex項目將占用剩余的空間。

Flex: 1相當于Flex: 1 0 0和Flex: 1 1 0

請查看我拍攝的分別顯示Flex: 1和Flex: 1 0 0和Flex: 1 1 0的輸出的圖像

柔性:1/圖像-3/ Flex: 1 0 0Flex: 1 1 0