Flex box



Vocabulaire

Conteneur Flex: (Flex Container) L’élément parent dans lequel chaque élément flex sera contenu. Un conteneur flex est défini lorsque la propriété display possède la valeur flex ou inline-flex.

Élément flex: (Flex item) Chaque enfant d’un conteneur flex devient un élément flex. Le texte directement contenu dans un conteneur flex est englobé dans un élément flex anonyme.

Axes: Toute boîte suit deux axes : L’axe principal (main axis) sur lequel les éléments flex se suivent. L’axe secondaire (cross axis) est perpendiculaire à l’axe principal.

-Justify-content définit comment les éléments "flex" sont positionnés le long de l’axe principal sur la ligne courante.

-Align-items définit comment les éléments "flex" sont positionnés le long de "cross axis" sur la ligne courante.

-Flex-direction établit l’axe principal(main axis).

-Align-self définit comment un seul élément "flex" est aligné sur cross axis et surcharge le comportement par défaut défini par align-items.



cloudLien vers MDN web docs videogame_assetflexbox froggy videogame_assetflexbox defense

Compatibilité des navigateurs

source caniuse.com mise à jour le: 16/05/2018



CheatSheet

justify-content :

Pour aligner des objets horizontalement.

flex-start : Les éléments s'alignent au côté gauche du conteneur.

flex-end : Les éléments s'alignent au côté droit du conteneur.

center : Les éléments s'alignent au centre du conteneur.

space-between : Les éléments s'affichent avec un espace égal entre eux.

space-around : Les éléments s'affichent avec un espacement égal à l'entour d'eux.

flex-direction :

Définit la direction dans laquelle les éléments sont placés dans le conteneur.

row : Les éléments sont disposés dans la même direction que le texte.

row-reverse : Les éléments sont disposés dans la direction opposée au texte.

column : Les éléments sont disposés de haut en bas.

column-reverse : Les éléments sont disposés de bas en haut.

flex-wrap :

Permet de fixer aux objets une même propriété.

nowrap : Tous les éléments sont tenus sur une seule ligne.

wrap : Les éléments s'enveloppent sur plusieurs lignes au besoin.

wrap-reverse : Les éléments s'enveloppent sur plusieurs lignes dans l'ordre inversé.

align-items :

Pour aligner les objets verticalement.

flex-start : Les éléments s'alignent au haut du conteneur.

flex-end : Les éléments s'alignent au bas du conteneur.

center : Les éléments s'alignent au centre vertical du conteneur.

baseline : Les éléments s'alignent à la ligne de base du conteneur.

stretch : Les éléments sont étirés pour s'adapter au conteneur.

align-self :

Utilise les mêmes valeurs que align-items mais pour un seul objet.

align-content :

Détermine l'espace entre les lignes, alors que align-items détermine comment les éléments dans leur ensemble sont alignées à l'intérieur du conteneur. Notez que align-content n'a aucun effet quand il n'y a qu'une seule ligne.

order :

Par défaut, les éléments ont une valeur de 0, mais on peut utiliser cette propriété pour changer la valeur à un entier positif ou négatif.

flex-flow :

Permet de combiner flex-direction et flex-wrap et d'en faire un raccourcis