La propriété flex en CSS est un raccourci pour flex-croître, flex-rétrécir, et base flexible. Cela ne fonctionne que sur les éléments flexibles, donc si l'élément du conteneur n'est pas un élément flexible, le fléchir La propriété n'affectera pas l'article correspondant.
Cette propriété est utilisée pour définir la longueur des éléments flexibles. Le positionnement des éléments enfants et du conteneur principal est facile avec cette propriété CSS. Il est utilisé pour définir la manière dont un élément flexible rétrécira ou s'agrandira pour s'adapter à l'espace.
Le fléchir La propriété peut être spécifiée par une, deux ou trois valeurs.
- Lorsqu'il existe une syntaxe à valeur unique, la valeur doit être soit un nombre, soit des mots-clés tels que aucun, automatique, ou initial .
- Lorsqu'il existe une syntaxe à deux valeurs, la première valeur doit être un nombre (utilisé comme croissance flexible ), la deuxième valeur peut être soit un nombre (utilisé pour flex-rétrécissement ) ou une valeur de largeur valide (utilisée comme base flexible ).
- Lorsqu'il existe une syntaxe à trois valeurs, alors les valeurs doivent suivre l'ordre : a nombre pour le croissance flexible, un nombre pour le flex-rétrécissement, et un valide largeur la valeur pour base flexible .
Syntaxe
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Valeurs des propriétés
croissance flexible : C'est un nombre positif sans unité qui détermine le facteur de croissance flexible. Il spécifie de combien l'élément va croître par rapport aux autres éléments flexibles. Les valeurs négatives ne sont pas autorisées. S'il est omis, alors il prend la valeur 1 .
flex-rétrécissement : C'est le nombre positif sans unité qui détermine le facteur de rétrécissement par flexion. Il spécifie de combien l'élément rétrécira par rapport aux autres éléments flexibles. Les valeurs négatives ne sont pas autorisées. S'il est omis, alors il prend la valeur 1 .
base flexible : C'est la longueur en unités relatives ou absolues qui définit la longueur initiale de l'élément flexible. Il est utilisé pour définir la longueur de l'élément flexible. Ses valeurs peuvent être voiture, hériter, ou un nombre suivi des unités de longueur telles que em, px, etc. Les valeurs négatives ne sont pas autorisées. S'il est omis, alors il prend la valeur 0 .
auto: Cette valeur de la propriété flex est équivalente à 1 1 automatique .
aucun: Cette valeur de la propriété flex est équivalente à 0 0 automatique . Il n'agrandit ni ne réduit les éléments flexibles.
initial: Il définit la propriété à sa valeur par défaut. C'est équivalent à 0 0 automatique .
hériter: Il hérite de la propriété de son élément parent.
Exemple
Dans cet exemple, il y a trois conteneurs, chacun contenant trois éléments flexibles. Le largeur et la hauteur des conteneurs sont 300px et 100px .
Nous appliquons le flexion : 1 ; aux flex-items du premier conteneur, flexion : 0 50 px ; aux flex-items du deuxième conteneur, et flexion : 2 2 ; aux éléments flexibles du troisième conteneur.
CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> Testez-le maintenant Sortir
