Le guide Flexbox

Flexbox, également appelé Flexible Box Module, est l'un des deux systèmes de mise en page modernes, avec CSS Grid

introduction

Flexbox, également appelé Flexible Box Module, est l'un des deux systèmes de mise en page modernes, avec CSS Grid.

Comparé à CSS Grid (qui est bidimensionnel), flexbox est unmodèle de disposition unidimensionnel. Il contrôlera la mise en page en fonction d'une ligne ou d'une colonne, mais pas ensemble en même temps.

L'objectif principal de flexbox est de permettre aux éléments de remplir tout l'espace offert par leur conteneur, en fonction de certaines règles que vous définissez.

À moins que vous n'ayez besoin de prendre en charge d'anciens navigateurs comme IE8 et IE9, Flexbox est l'outil qui vous permet d'oublier d'utiliser

Dispositions de table
Flotteurs
hacks clearfix
display: tablehacks

Plongeons-nous dans la flexbox et devenons-en un maître en très peu de temps.

Prise en charge du navigateur

Au moment de la rédaction de cet article (février 2018), il est pris en charge par 97,66% des utilisateurs, tous les navigateurs les plus importants l'implémentent depuis des années, donc même les navigateurs plus anciens (y compris IE10 +) sont couverts:

Browser support

Alors que nous devons attendre quelques années pour que les utilisateurs rattrapent leur retard sur CSS Grid, Flexbox est une technologie plus ancienne et peut être utilisée dès maintenant.

Activer Flexbox

Une mise en page flexbox est appliquée à un conteneur, en définissant

display: flex;

display: inline-flex;

le contenuà l'intérieur du conteneursera aligné à l'aide de flexbox.

Propriétés du conteneur

Certaines propriétés flexbox s'appliquent au conteneur, qui définit les règles générales pour ses éléments. Elles sont

flex-direction
justify-content
align-items
flex-wrap
flex-flow

Aligner des lignes ou des colonnes

La première propriété que nous voyons,flex-direction, détermine si le conteneur doit aligner ses éléments sous forme de lignes ou de colonnes:

flex-direction: rowplace les éléments en tant querangée, dans le sens du texte (de gauche à droite pour les pays occidentaux)
flex-direction: row-reverseplace des éléments commerowmais dans la direction opposée
flex-direction: columnplace des éléments dans uncolonne, commande de haut en bas
flex-direction: column-reverseplace les éléments dans une colonne, tout commecolumnmais dans la direction opposée

Rows or columns

Alignement vertical et horizontal

Par défaut, les éléments commencent à gauche siflex-directionestrow, et du haut siflex-directionestcolumn.

Vertical and horizontal alignment

Vous pouvez modifier ce comportement en utilisantjustify-contentpour changer l'alignement horizontal, etalign-itemspour modifier l'alignement vertical.

Changer l'alignement horizontal

justify-contenta 5 valeurs possibles:

flex-start: aligner sur le côté gauche du conteneur.
flex-end: aligner sur le côté droit du conteneur.
center: aligner au centre du conteneur.
space-between: afficher avec un espacement égal entre eux.
space-around: afficher avec un espacement égal autour d'eux

Horizontal alignment

Changer l'alignement vertical

align-itemsa 5 valeurs possibles:

flex-start: aligner sur le haut du conteneur.
flex-end: aligner sur le fond du conteneur.
center: aligner au centre vertical du conteneur.
baseline: affichage à la ligne de base du conteneur.
stretch: les articles sont étirés pour s'adapter au conteneur.

Vertical alignment

Une note sur`baseline`

baselineressemble àflex-startdans cet exemple, car mes boîtes sont trop simples. Vérifierce Codepenpour avoir un exemple plus utile, que j'ai tiré d'un stylo créé à l'origine parMartin Michálek. Comme vous pouvez le voir, les dimensions des éléments sont alignées.

Envelopper

Par défaut, les éléments d'un conteneur Flexbox sont conservés sur une seule ligne, ce qui les réduit pour qu'ils tiennent dans le conteneur.

Pour forcer les éléments à se répartir sur plusieurs lignes, utilisezflex-wrap: wrap. Cela distribuera les articles en fonction de l'ordre défini dansflex-direction. Utilisationflex-wrap: wrap-reversepour inverser cet ordre.

Une propriété abrégée appeléeflex-flowvous permet de spécifierflex-directionetflex-wrapen une seule ligne, en ajoutant leflex-directionvaleur en premier, suivi deflex-wrapvaleur, par exemple:flex-flow: row wrap.

Propriétés qui s'appliquent à chaque élément

Depuis, nous avons vu les propriétés que vous pouvez appliquer au conteneur.

Les éléments uniques peuvent avoir une certaine indépendance et flexibilité, et vous pouvez modifier leur apparence à l'aide de ces propriétés:

order
align-self
flex-grow
flex-shrink
flex-basis
flex

Voyons-les en détail.

Déplacer des éléments avant / après un autre en utilisant la commande

Les articles sont commandés en fonction d'un ordre qui leur est attribué. Par défaut, chaque article a une commande0et l'apparence dans le HTML détermine l'ordre final.

Vous pouvez remplacer cette propriété en utilisantordersur chaque élément distinct. Il s'agit d'une propriété que vous définissez sur l'élément, pas sur le conteneur. Vous pouvez faire apparaître un élément avant tous les autres en définissant une valeur négative.

Moving items before or after another one

Alignement vertical avec align-self

Un article peut choisir depasser outrele containeralign-itemsréglage, utilisationalign-self, qui a les 5 mêmes valeurs possibles dealign-items:

flex-start: aligner sur le haut du conteneur.
flex-end: aligner sur le fond du conteneur.
center: aligner au centre vertical du conteneur.
baseline: affichage à la ligne de base du conteneur.
stretch: les articles sont étirés pour s'adapter au conteneur.

Vertical alignment

Agrandir ou réduire un article si nécessaire

Flex-Grow

The defaut for any item is 0.

Si tous les éléments sont définis comme 1 et l'un est défini comme 2, l'élément le plus grand prendra l'espace de deux éléments «1».

flex-shrink

The defaut for any item is 1.

Si tous les éléments sont définis comme 1 et l'un est défini comme 3, l'élément le plus grand rétrécira 3 fois les autres. Lorsque moins d'espace est disponible, cela prendra 3 fois moins d'espace.

flex-base

Si défini surauto, il dimensionne un article en fonction de sa largeur ou de sa hauteur, et ajoute de l'espace supplémentaire en fonction duflex-growbiens.

S'il est défini sur 0, il n'ajoute pas d'espace supplémentaire pour l'élément lors du calcul de la mise en page.

Si vous spécifiez une valeur de nombre de pixels, il l'utilisera comme valeur de longueur (la largeur ou la hauteur dépend s'il s'agit d'un élément de ligne ou de colonne)

fléchir

Cette propriété combine les 3 propriétés ci-dessus:

flex-grow
flex-shrink
flex-basis

et fournit une syntaxe abrégée:flex: 0 1 auto

Téléchargez mon gratuitManuel CSS