flex CSS propriété

Définition de la CSS flex.

La propriété de Flexbox CSS flex est un raccourci qui permet de spécifier un facteur d'agrandissement ou de réduction de la taille* d'un élément flexible Css en fonction de l'espace disponible dans leur conteneur Flexbox Css et par rapport à l'axe principal.
Vous pouvez faire des tests de paramétrage dans le générateur de code Css de Flexbox.

Exemple de syntaxe CSS flex :

flex : 0 0 auto ;
flex : 5 1 auto;
flex : 30%; 
flex : 1 30%;
flex : 2;
flex : 1 1;
flex : 1 1 0%;

La propriété de feuille de style flex CSS peut prendre une valeur de chaque propriété suivante :

flex-grow: un facteur d'agrandissement de la taille initiale* en cas de redistribution de l'espace restant. Peut être omise, dans ce cas, sa valeur est 0.
flex-shrink: un facteur de réduction de la taille initiale* en cas où la tailles totales des éléments flexibles soient supérieures à la taille du conteneur Flexbox Css. Peut être omise, dans ce cas, sa valeur est 0.
flex-basis: la taille initiale* désirée d'un élément flexible suivie d'une unité de longueur (px ou ex ou em, etc...). Peut être omise, dans ce cas, sa valeur est 0.
none : valeur seule, revient a mettre: 0 0 auto.

Exemple de code flex CSS

Conditions d'application de la CSS flex.

La propriété de feuille de style flex CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont des éléments flexibles Css d'un conteneur Flexbox Css type display:[inline-]flex.

Héritage des valeurs Css de flex.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style flex

Règles de syntaxes CSS pour flex.

Règle d'écriture de la css flex

Par défaut la propriété flex Css vaut: 0 1 auto.

Si vous omettez flex-basis sa valeur ne sera plus auto mais 0%.

Si vous ne spécifiez qu'une valeur sans unité, alors cela revient a faire: mavaleur 1 0%.
Si vous ne spécifiez qu'une valeur avec unité, alors cela revient a faire: 1 1 mavaleurunite.

Si vous ne spécifiez que deux valeurs sans unité, alors cela revient a faire: mavaleur1 mavaleur2 0%.
Si vous ne spécifiez que deux valeurs et que la dernière a une unité, alors cela revient a faire: mavaleur1 1 mavaleur2unite.

Dépend de la valeur de flex-direction

*) Dépend de la valeur de flex-direction :

flex-direction:row*, alors l'agrandissement, la réduction et la taille initiale concernera le "width".
flex-direction:column*, alors l'agrandissement, la réduction et la taille initiale concernera le "height".

Compatibilités navigateurs de la propriété flex

Détails des versions de la CSS flex: Propriété flex est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS flex: Propriété CSS flex est compatible sous une forme préfixée avec Chrome 4; Propriété CSS flex est compatible à partir de Chrome 28; Propriété CSS flex est compatible sous une forme préfixée avec Firefox 2; Propriété CSS flex est compatible à partir de Firefox 22; Propriété CSS flex est compatible sous une forme préfixée avec Internet Explorer 10; Propriété CSS flex est compatible à partir de Internet Explorer 11; Propriété CSS flex est compatible à partir de Opera 12; Propriété CSS flex est compatible sous une forme préfixée avec Safari 3; Propriété CSS flex est compatible à partir de Safari 9; Propriété CSS flex est compatible sous une forme préfixée à partir de Internet Explorer mobile 8.1

Propriétés CSS préfixées de flex

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété flex CSS :

Pour rendre compatible la propriété flex CSS avec le plus grand nombre de navigateurs, vous devez utiliser les versions préfixées suivante :

Versions préfixées de flex :

-webkit-box-flex : 1;
-ms-flex : 1 1 0%;
flex : 1 1 0%

C'est la meilleur façon de déclarer la propriété Css flex pour que les éléments flexibles s'auto-adapte à la taille du conteneur Flexbox.

Votre avis sur la définition flex en CSS

Votez pour la définition CSS `flex`

Votes: 4.3 / 5 - 7 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css flex

Définitions CSS annexes flex

flex-basis: La propriété de Flexbox CSS FLEX-BASIS permet de spécifier la taille* initiale désirée d'un élément flexible avant réduction de sa taille ou avant red...[ flex-basis ]
flex-direction: La propriété de Flexbox CSS FLEX-DIRECTION permet de spécifier le type d'ordonnancement (colonne ou ligne) des éléments flexibles Css sur l'axe princi...[ flex-direction ]
flex-grow: La propriété de Flexbox CSS FLEX-GROW permet de spécifier un facteur d'agrandissement de la taille initiale d'un élément flexible Css sur l'axe princi...[ flex-grow ]
flex-shrink: La propriété de Flexbox CSS FLEX-SHRINK permet de spécifier un facteur de réduction de la taille initiale d'un élément flexible Css sur l'axe principa...[ flex-shrink ]