Cosa significa flex: 1?

Come tutti sappiamo, la flexproprietà è una scorciatoia per il flex-grow, flex-shrinke le flex-basisproprietà. Il suo valore predefinito è 0 1 auto, che significa

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

ma ho notato, in molti posti flex: 1viene utilizzato. È una scorciatoia per 1 1 autoo 1 0 auto? Non riesco a capire cosa significhi e non ottengo nulla quando cerco su Google.

Ecco la spiegazione:

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

flex: <numero-positivo>
Equivalente a flex: <numero-positivo> 1 0. Rende l'elemento flessibile flessibile e imposta la base flessibile su zero, risultando in un elemento che riceve la proporzione specificata di spazio libero nel contenitore flessibile. Se tutti gli elementi nel contenitore flessibile utilizzano questo modello, le loro dimensioni saranno proporzionali al fattore di flessibilità specificato.

Pertanto flex:1è equivalente aflex: 1 1 0

flex: 1 significa quanto segue:

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%.

STAI ATTENTO

In alcuni browser:

flex:1; non è ugualeflex:1 1 0;

flex:1;= flex:1 1 0n;(dove n è un'unità di lunghezza).

• flex-grow: un numero che specifica quanto crescerà l'elemento rispetto al resto degli elementi flessibili.
• flex-shrink Un numero che specifica quanto l'oggetto si restringerà rispetto al resto degli articoli flessibili
• base flessibile La lunghezza dell'articolo. Valori legali: "auto", "inherit" o un numero seguito da "%", "px", "em" o qualsiasi altra unità di lunghezza.

Il punto chiave qui è che la base flessibile richiede un'unità di lunghezza .

In Chrome per esempio flex:1e flex:1 1 0producono risultati diversi. Nella maggior parte dei casi può sembrare che funzioni, flex:1 1 0;ma esaminiamo cosa succede realmente:

ESEMPIO

La base flessibile viene ignorata e vengono applicati solo flex-grow e flex-shrink.

flex:1 1 0;= flex:1 1;=flex:1;

A prima vista, tuttavia, potrebbe sembrare corretto se l'unità applicata del contenitore è annidata; aspettare l'inaspettato!

Prova questo esempio in 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>

COMPATIBILITÀ

Va notato che questo fallisce perché alcuni browser non sono riusciti ad aderire alle specifiche .

Browser che utilizzano la specifica flex completa:

• Firefox - ✓
• Edge - ✓ (Lo so, anche io sono rimasto scioccato.)
• Chrome - x
• Coraggioso - x
• Opera - x
• IE - (lol, funziona senza unità di lunghezza ma non con una.)

AGGIORNAMENTO 2019

Le ultime versioni di Chrome sembrano aver finalmente risolto questo problema, ma altri browser non lo hanno ancora fatto.

Testato e funzionante con Chrome Ver 74.