Flex - Astuces CSS

La flexpropriété est une sous-propriété du module Disposition de boîte flexible.

C'est le raccourci pour flex-grow, flex-shrinket flex-basis. Les deuxième et troisième paramètres ( flex-shrinket flex-basis) sont facultatifs.

Syntaxe

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Voici le scoop sur ce que les valeurs mappent en fonction du nombre de valeurs que vous lui donnez:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Valeurs communes pour flex

flex: 0 auto;

Ceci est le même que flex: initial;et le raccourci pour la valeur par défaut: flex: 0 1 auto. Il dimensionne l'élément en fonction de ses propriétés width/ height(ou de son contenu s'il n'est pas défini).

Cela rend l'élément flexible inflexible lorsqu'il reste de l'espace libre, mais lui permet de se rétrécir à son minimum lorsqu'il n'y a pas assez d'espace. Les capacités d'alignement ou les automarges peuvent être utilisées pour aligner les éléments flexibles le long de l'axe principal.

flex: automatique;

C'est équivalent à flex: 1 1 auto. Attention, ce n'est pas la valeur par défaut. Il dimensionne l'élément en fonction de ses propriétés width/ height, mais le rend totalement flexible afin qu'il absorbe tout espace supplémentaire le long de l'axe principal.

Si tous les éléments sont soit flex: auto, flex: initialou flex: none, tout l' espace restant après que les articles ont été de taille seront distribués uniformément sur les articles avec flex: auto.

flex: aucun;

C'est équivalent à flex: 0 0 auto. Il dimensionne l'élément en fonction de ses propriétés width/ height, mais le rend totalement inflexible.

Ceci est similaire à flex: initialsauf qu'il n'est pas autorisé à réduire, même en cas de débordement.

fléchir:

Équivalent à flex: 1 0px. Cela rend l'élément flexible flexible et définit la base flexible sur zéro, ce qui donne un élément qui reçoit la proportion spécifiée de l'espace restant.

Si tous les éléments du conteneur flexible utilisent ce modèle, leurs tailles seront proportionnelles au facteur flexible spécifié.

Démo

La démo suivante montre une mise en page très simple avec Flexbox grâce à la flexpropriété:

Voici le morceau de code révélateur:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Tout d'abord, nous avons autorisé l'affichage des éléments flexibles sur plusieurs lignes avec flex-flow: row wrap.

Ensuite, nous disons à l'en-tête et au pied de page de prendre 100% de la largeur de la fenêtre actuelle, quoi qu'il arrive.

Et le contenu principal et les deux barres latérales partageront la même ligne, partageant l'espace restant comme suit: 66% (2 / (1 + 2)) pour le contenu principal, 33% (1 / (1 + 2)) pour la barre latérale .

Prise en charge du navigateur

• (moderne) signifie la syntaxe récente de la spécification (par exemple display: flex;)
• (hybride) signifie une syntaxe non officielle étrange de 2011 (par exemple display: flexbox;)
• (ancien) signifie l'ancienne syntaxe de 2009 (par exemple display: box;)

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
21+ (moderne) 20- (ancien)	3.1+ (ancien)	2-21 (ancien) 22+ (nouveau)	12.1+ (moderne)	10+ (hybride)	2.1+ (ancien)	3.2+ (ancien)

Le navigateur Blackberry 10+ prend en charge la nouvelle syntaxe.

Pour plus d'informations sur la façon de mélanger les syntaxes afin d'obtenir le meilleur support du navigateur, veuillez vous référer à cet article (CSS-Tricks) ou à cet article (DevOpera).