Qu'est-ce que flex: 1 signifie?

Question

`

Comme nous le savons tous, la propriété flex est un raccourci pour les propriétés flex-grow, flex-shrink, et flex-basis. 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: 1 est utilisé. Est-ce un raccourci pour 1 1 auto ou 1 0 auto? Je ne comprends pas ce que cela signifie et je n'obtiens rien lorsque je recherche sur Google.

`

Answer 1

flex: 1 signifie ce qui suit :

flex-grow : 1;     Le div va se développer dans la même proportion que la taille de la fenêtre       
flex-shrink : 1;   Le div va rétrécir dans la même proportion que la taille de la fenêtre 
flex-basis : 0;    Le div n'a pas de valeur de départ en tant que telle et va 
                     prendre l'écran en fonction de l'espace disponible pour
                     par exemple : si 3 divs sont dans le conteneur alors chaque div prendra 33%.

Answer 2

Voici l'explication :

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

flex:
Équivalent à flex: 1 0. Rend l'élément flex 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 dans le conteneur flex utilisent ce modèle, leurs tailles seront proportionnelles au facteur flex spécifié.

Par conséquent, flex:1 est équivalent à flex: 1 1 0

Answer 3

SOYEZ PRUDENT

Dans certains navigateurs :

flex:1; ne équivaut pas à flex:1 1 0;

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

• flex-grow : un nombre spécifiant combien l'élément va croître par rapport au reste des éléments flexibles.
• flex-shrink : un nombre spécifiant combien l'élément va rétrécir par rapport au reste des éléments flexibles.
• flex-basis : la longueur de l'élément. Valeurs légales : "auto", "inherit", ou un nombre suivi de "%", "px", "em" ou toute autre unité de longueur.

Le point clé ici est que flex-basis 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 circonstances, il peut sembler que flex:1 1 0; fonctionne, mais examinons ce qu'il se passe réellement :

EXEMPLE

Flex-basis est ignoré et seul flex-grow et flex-shrink sont appliqués.

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

Cela peut sembler correct à première vue, cependant, 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

FLEX 1

FLEX 1 1 0%

---

MISE À JOUR 2021

Les dernières versions de tous les principaux navigateurs semblent implémenter flex: 1 et se conformer à la norme W3C. Cela a été vérifié sur Chrome, Opera, Edge, Firefox, Safari, Chromium et quelques variantes de Chromium comme Brave sur macOS, Windows, Linux, iOS et Android. Lorsqu'on a tenté de tester dans Internet Explorer, le navigateur Edge a été chargé de force sur Windows 10.

Si vous vous attendez à ce que les utilisateurs continuent d'utiliser des versions plus anciennes de navigateur, alors l'ajout d'unités est plus sûr.

Answer 4

J'étais aussi confus avec flex: 1, donc je vais partager ici ma façon de comprendre cette propriété :)

Pour comprendre le concept de flex: 1, tout d'abord, nous devons nous assurer que l'élément parent a une propriété d'affichage définie sur flex, c'est-à-dire, display: flex. Maintenant, les éléments flex imbriqués à l'intérieur du parent peuvent utiliser flex: 1.

D'accord, maintenant la question est de savoir ce que cela va faire à l'élément flex ? Si un élément a flex: 1, cela signifie que la taille de tous les autres éléments aura la même largeur que leur contenu, mais l'élément avec flex: 1 occupera tout l'espace restant qui lui est attribué. Voir l'illustration ci-dessous.

Answer 5

Dans Chrome Ver 84, flex: 1 est équivalent à flex: 1 1 0%. Les captures d'écran suivantes