Que signifie flex: 1?

Comme nous le savons tous, la flexpropriété est un raccourci pour la flex-grow, flex-shrinket les flex-basispropriétés. Sa valeur par défaut est 0 1 auto, ce qui signifie

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

mais j'ai remarqué, dans de nombreux endroits flex: 1est utilisé. Est-ce un raccourci pour 1 1 autoou 1 0 auto? Je ne comprends pas ce que cela signifie et je n'obtiens rien lorsque je cherche sur Google.

Voici l'explication:

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

flex: <positive-number>
Equivalent à flex: <positive-number> 1 0. Rend l'élément flexible flexible et définit la base flex à zéro, ce qui donne un élément qui reçoit la proportion spécifiée de l'espace libre dans le conteneur flex. Si tous les éléments du conteneur flexible utilisent ce modèle, leurs tailles seront proportionnelles au facteur flexible spécifié.

Par conséquent flex:1équivaut àflex: 1 1 0

flex: 1 signifie ce qui suit:

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

FAITES ATTENTION

Dans certains navigateurs:

flex:1; ne pas égalerflex:1 1 0;

flex:1;= flex:1 1 0n;(où n est une unité de longueur).

• flex-grow: un nombre spécifiant la croissance de l'élément par rapport au reste des éléments flexibles.
• flex-shrink Un nombre spécifiant le degré de rétrécissement de l'élément par rapport au reste des éléments flexibles
• flex-base La longueur de l'élément. Valeurs légales: "auto", "inherit" ou un nombre suivi de "%", "px", "em" ou de toute autre unité de longueur.

Le point clé ici est que la base flexible nécessite une unité de longueur .

Dans Chrome par exemple flex:1et flex:1 1 0produire des résultats différents. Dans la plupart des cas, il peut sembler que cela flex:1 1 0;fonctionne, mais examinons ce qui se passe réellement:

EXEMPLE

La base Flex est ignorée et seuls flex-grow et flex-shrink sont appliqués.

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

Cela peut à première vue sembler correct si l'unité appliquée du conteneur est imbriquée; attendez-vous à l'inattendu!

Essayez cet exemple dans 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É

Il convient de noter que cela échoue car certains navigateurs n'ont pas respecté la spécification .

Navigateurs utilisant la spécification flex complète:

• Firefox - ✓
• Edge - ✓ (Je sais, j'ai été choqué aussi.)
• Chrome - x
• Brave - x
• Opéra - x
• IE - (lol, cela fonctionne sans unité de longueur mais pas avec une seule.)

MISE À JOUR 2019

Les dernières versions de Chrome semblent avoir finalement résolu ce problème, mais d'autres navigateurs ne l'ont toujours pas fait.

Testé et fonctionnant dans Chrome Ver 74.