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

Les valeurs par défaut sont définies sur 1 1 0% (qui sont les valeurs abrégées de flex-grow flex-shrink flex-basis respectivement) probablement parce que ce sont les valeurs qui ont le plus de sens pour les éléments "flex". Voici exactement ce que ces valeurs signifient:

• flex-basis: Cela spécifie la taille idéale pour les éléments. Idéal signifie "en supposant qu'il n'y ait ni espace supplémentaire, ni pénurie d'espace". 0% signifie que nous n'avons aucune taille idéale pour eux, nous voulons qu'ils soient dimensionnés de manière vraiment flexible. Nous voulons qu'ils soient dimensionnés automatiquement (d'où le mot "flexible") en fonction de l'espace disponible.
• flex-grow: Après avoir pris en compte le flex-basis, s'il reste de l'espace supplémentaire, cela spécifie comment "cet espace supplémentaire" (remarquez que nous ne parlons pas de tout l'espace) doit être divisé entre les éléments. Ceux avec un flex-grow plus élevé absorberont plus de l'espace supplémentaire. Il est logique d'utiliser un flex-grow égal sur tous les éléments par défaut afin que tous les éléments aient la même part de l'espace supplémentaire. Lorsque flex-basis est de 0%, un flex-grow de 1 sur tous les éléments les fait diviser "tout l'espace du conteneur" (puisque flex-basis n'utilise aucun espace, l'espace supplémentaire équivaut à tout l'espace du conteneur).
• flex-shrink: Après avoir pris en compte le flex-basis, si l'espace disponible n'est pas suffisant, cela spécifie comment "la pénurie d'espace" (et encore une fois, pas tout l'espace) doit être divisée (imposée) entre les éléments. Ceux avec un flex-shrink plus élevé devront "endurer" plus de cette pénurie.

---

Exemples:

• flex-basis: Un flex-basis de 400px sur 3 éléments signifie que nous préférerions avoir 3 éléments de 400px de large chacun. Maintenant, que se passera-t-il:

  1. Si nous avons de l'espace supplémentaire? Disons que la largeur du conteneur est de 1500 pixels. Les 3 éléments occuperont 1200 pixels, que faudrait-il faire de ces 300 pixels supplémentaires?
  2. Si nous manquons d'espace dans le conteneur? Par exemple, s'il y a 5 éléments de 400 pixels chacun dans un conteneur de 1500px (pénurie = |1500px - 5 * 400px| = 500px).

• La réponse aux deux questions ci-dessus est flex-grow (réponse à la 1ère question) et flex-shrink (réponse à la 2ème question).

Par exemple, que se passerait-il si l'un des trois éléments avait un flex-grow de 5 et que les autres étaient toujours sur leurs valeurs par défaut (c'est-à-dire, 1)? Alors celui avec un flex-grow de 5 obtiendrait (300px / (1+1+5)) * 3 de l'espace supplémentaire.

Un autre exemple utile est, si vous avez un conteneur flex et que vous souhaitez que chacun des enfants prenne exactement toute la largeur du parent (par exemple, un carrousel d'images), dans ce cas vous pouvez utiliser un flex: 0 0 100% sur tous les enfants afin que les éléments aient une flex-basis prenant la pleine largeur du parent, tout en désactivant leur croissance/rétrécissement.

Answer 2

La propriété CSS flex spécifie comment un élément flex va grandir ou rétrécir pour s'adapter à l'espace disponible dans son conteneur flex. Il s'agit d'une propriété abrégée qui définit flex-grow, flex-shrink et flex-basis.

/* Valeurs de base */
flex: auto;
flex: initial;
flex: none;
flex : 2;

/* Deux valeurs: flex-grow | flex-shrink */

flex: 1 1;

/* Trois valeurs: flex-grow | flex-shrink | flex-basis */

flex: 1 1 10%;

auto

L'élément est dimensionné en fonction de ses propriétés de largeur et hauteur, mais il grandit pour absorber tout espace supplémentaire disponible dans le conteneur flex, et rétrécit à sa taille minimale pour s'adapter au conteneur. Cela équivaut à définir "flex: 1 1 auto".

initial

C'est la valeur par défaut. L'élément est dimensionné en fonction de ses propriétés de largeur et hauteur. Il rétrécit à sa taille minimale pour s'adapter au conteneur, mais ne grandit pas pour absorber tout espace supplémentaire disponible dans le conteneur flex. Cela équivaut à définir "flex: 0 1 auto".

none

L'élément est dimensionné en fonction de ses propriétés de largeur et hauteur. Il est entièrement rigide : il ne rétrécit ni ne grandit par rapport au conteneur flex. Cela équivaut à définir "flex: 0 0 auto".

Answer 3

flex: 1 définit flex-grow à 1 (alors que la valeur par défaut est 0).

Ce que cela fait:

Si tous les éléments ont flex-grow défini à 1, l'espace restant dans le conteneur sera distribué également à tous les enfants. Si l'un des enfants a une valeur de 2, l'espace restant prendrait le double d'espace par rapport aux autres (ou du moins, essayera de le faire).

(Source: CSS Tricks)

Dans le cas d'une syntaxe flex à une seule valeur avec un nombre sans unité (plutôt qu'une valeur pour flex-basis, l'autre option),

... cela est interprété comme flex: 1 0; la valeur de flex-shrink est supposée être 1 et la valeur de flex-basis est supposée être 0.

(Source: MDN)

Answer 4

Flex: 1 est équivalent à Flex: 1 0 0 et Flex: 1 1 0

Veuillez consulter les images que j'ai prises montrant la sortie, respectivement, pour Flex: 1 et Flex: 1 0 0 et Flex: 1 1 0 ci-dessous

Flex: 1
Flex: 1 0 0 Flex: 1 1 0

Answer 5

flex: 1:

signifie que l'élément avec flex: 1 le fera

flex-grow: 1; Le div va grandir 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 de l'écran selon la taille d'écran disponible.