flex
Raccourci qui règle flex-grow, flex-shrink et flex-basis d’un élément.
- Valeur initiale
0 1 auto- Héritée
- Non
- Animable
- oui, nombres et longueur
- S’applique à
- éléments flex
- JavaScript
element.style.flex = "1"
Exemple
#.app {
display: flex;
gap: 12px;
}
.app .sidebar { flex: 0 0 160px; }
.app .content { flex: 1; }<div class="app stage">
<aside class="sidebar box">Menu</aside>
<main class="content box">Le contenu de la leçon occupe le reste de l’espace</main>
</div>Définition et utilisation
#La propriété flex réunit trois propriétés d’un élément flex : sa capacité à grandir (flex-grow), à rétrécir (flex-shrink) et sa taille de base (flex-basis). C’est la façon la plus courante de contrôler la taille des éléments en Flexbox.
Il vaut la peine de retenir quelques écritures toutes faites. flex: 1 donne des colonnes égales qui partagent tout l’espace (1 1 0%). flex: auto permet de grandir et de rétrécir à partir de la taille du contenu (1 1 auto). flex: none fige l’élément à sa taille naturelle (0 0 auto).
Le raccourci fixe des valeurs par défaut plus sensées que les propriétés isolées : quand vous ne donnez qu’un nombre, flex-basis devient 0%, et non auto.
Syntaxe
#flex: none | auto | <flex-grow> <flex-shrink>? <flex-basis>?;Valeurs
#initial
Valeur par défaut : la taille vient du contenu, sans croissance.- Tous les éléments ont une largeur égale, quel que soit leur contenu.
- Les éléments grandissent, mais à partir de la taille de leur contenu, donc les plus longs sont plus larges.
- L’élément 2 ne grandit ni ne rétrécit, les autres se partagent l’espace.
- L’élément 2 est deux fois plus large que les autres avec
flex: 1.
Valeurs en pratique
#0 1 auto
.demo .box { flex: 0 1 auto; }1
.demo .box { flex: 1; }auto
.demo .box { flex: auto; }none
.demo .box { flex: 1; }
.target { flex: none; }2
flex: 1..demo .box { flex: 1; }
.target { flex: 2; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Retenez trois écritures :
flex: 1(parts égales),flex: auto(depuis le contenu) etflex: none(sans changement de taille). - Utilisez le raccourci plutôt que les trois propriétés séparées. Vous éviterez les surprises avec le
flex-basispar défaut.
Entrées associées
#- Flexbox vs GridFlexbox aligne les éléments sur un axe et s’adapte à leur contenu, alors que Grid organise une grille à deux dimensions, en lignes et colonnes, où vous les placez.
- flex-growDétermine avec quelle avidité un élément grandit pour remplir l’espace libre.
- flex-shrinkDétermine à quel point un élément rétrécit quand la place manque dans le conteneur.
- flex-basisFixe la taille de départ d’un élément flex sur l’axe principal, avant qu’il ne commence à grandir ou à rétrécir.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.