web-dev-qa-db-fra.com

Que signifie flex: 1?

Nous le savons tous, la propriété flex est un raccourci pour les propriétés flex-grow, flex-shrink et flex-basis. Et sa valeur par défaut est 0 1 auto. Ça veut dire:

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

mais j'ai remarqué que, dans de nombreux endroits, flex: 1 est utilisé. Est-ce un raccourci pour 1 1 auto ou 1 0 auto? Je ne peux pas comprendre ce que ça veut dire Je ne trouve rien dans Google.

csscss3flexbox
93
Md. Rafee

Voici l'explication:

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

flex: <nombre-positif>
Équivalent à flex: <nombre-positif> 1 0. Assouplit l'élément flex et définit la base de flex sur 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 Flex utilisent ce modèle, leurs tailles seront proportionnelles au facteur de flexion spécifié.

Donc flex:1 c'est équivalent à flex: 1 1 0

63
blonfu

flex: 1 signifie:

flex-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that 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%.
73
Dhaval Chheda

FAITES ATTENTION

Dans certains navigateurs:

flex:1; n'est pas égal à flex:1 1 0;

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

  • flex-grow: Nombre spécifiant la croissance de l'élément par rapport au reste des éléments flexibles.
  • flex-shrink Nombre spécifiant le degré de contraction 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 flex-base nécessite une unité de longueur .

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

EXEMPLE

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

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

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

Essayez cet exemple en 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 adhéré à la spécification .

Navigateurs utilisant la spécification full flex:

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

MISE À JOUR 2019

Les dernières versions de Chrome semblent avoir enfin résolu ce problème, mais pas les autres navigateurs.

Testé et fonctionnant sous Chrome Ver 74.

54
DreamTeK