Propriété style flex

Définition et utilisation

flex Définit et utilise la propriété flex. La propriété définit la longueur de l'élément par rapport aux autres éléments flexibles du même conteneur.

flex Cette propriété est une propriété abrégée de la propriété flexGrow, flexShrink et flexBasis.

Remarque :Si l'élément n'est pas un élément flexible, alors flex Propriété invalide.

Voir également :

Manuel de référence CSS :Propriété flex

Manuel de référence HTML DOM STYLE :Propriété flexBasis

Manuel de référence HTML DOM STYLE :Propriété flexDirection

Manuel de référence HTML DOM STYLE :Propriété flexFlow

Manuel de référence HTML DOM STYLE :Propriété flexGrow

Manuel de référence HTML DOM STYLE :Propriété flexShrink

Manuel de référence HTML DOM STYLE :Propriété flexWrap

Exemple

Faites que la longueur de tous les éléments flexibles soit la même, indépendamment de leur contenu :

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

Essayez-le vous-même

Syntaxe

Retourner la propriété flex :

object.style.flex

Définir la propriété flex :

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

Valeur de l'attribut

Valeur Description
flex-grow Nombre, définissant l'augmentation par rapport aux autres éléments flexibles.
flex-shrink Nombre, définissant la réduction par rapport aux autres éléments flexibles.
flex-basis

Longueur de l'élément.

Valeurs valides : "auto", "inherit", ou des valeurs d'unité de mesure sous forme de "%", "px", "em", ou toute autre unité de longueur.

auto Équivalent à 1 1 auto.
initial Équivalent à 0 1 auto. Voir initial.
none Équivalent à 0 0 auto.
inherit Inherits cette propriété de son élément parent. Voir inherit

Détails techniques

Valeur par défaut : 0 1 auto
Valeur de retour : Chaîne, représentant l'élément Propriété flex
Version de CSS : CSS3

Prise en charge du navigateur

Chrome Edge Firefox Safari Opéra
Chrome Edge Firefox Safari Opéra
Support 11.0 Support 9.0 Support