Flexbox en CSS pour bien positionner vos éléments

Il y a bien une chose qui est difficilement gérable en CSS, c’est bien le positionnement des éléments! Un véritable casse tête qui n’a jamais été résolu par 4 systèmes de positionnement officiels et différents (block, inline, tabulaire, positionné). Mais CSS grâce au système flexbox a su proposer un module dédié au positionnement. Cela vous sera très utile si vous voulez coder votre propre site Web où encore une landing page

Flexbox permet :

  • la distribution d’éléments aussi bien en lignes qu’en blocs
  • le contrôle et la gestion des espaces disponibles
  • le contrôle des alignements sur l’axe principal et secondaire
  • l’agencement des éléments sans tenir compte du DOM (l’ordre de flux)

Comment fonctionne flexbox ?

En déclarant un élément display: flex, il devient un conteneur flexible ou flex-container. Une boite flexible qui a comme enfants, des éléments flexibles ou flex-items.

flexbox - le modele flexbox

Deux axes pour une mise en page flexible:

Il n’ y a pas d’axe vertical ou horizontal puisqu’il existe une propriété flex-direction qui définit l’axe de défilement et la direction

Parce que flexbox est difficile à appréhender, nous allons détailler ses nombreuses propriétés pour qu’il n’est plus de secret pour vous !

Les propriétés de Flexbox

Display: flex comme point de départ

La propriété s’applique au flex-container, le parent.

display : flex | inline-flex

Tous les éléments du flex-container deviennent automatiquement des flex-items.

Flex-direction pour la direction générale

La propriété s’applique au flex-container, le parent.

flex-direction: row | row-reverse | column | colum-reverse
  • row : de gauche à droite
  • row-reverse : de droite à gauche
  • column : de haut en bas
  • wrap-reverse : de bas en haut

Vous déterminez le sens de défilement des éléments flexibles.

flexbox - flex-direction

Flex-wrap pour gérer les retours à la ligne

La propriété s’applique au flex-container, le parent.

flex-wrap : nowrap | wrap | wrap-reverse
  • nowrap : une seule ligne, de gauche à droite
  • wrap : multiligne, de gauche à droite
  • wrap-reverse : multiligne, de droite à gauche

Pour distribuer les éléments sur plusieurs lignes vous pouvez utiliser la propriété flex-wrap. Par défaut les flex-items restent sur la même ligne quitte à déborder du conteneur.

flexbox - flex-wrap

Flex-flow, le raccourci de Flex-direction et Flex-wrap

La propriété s’applique au flex-container, le parent.

flex-flow : <'flex-direction'> || <'flex-wrap'>

C’est ainsi que l’on définit le sens de défilement de lecture des éléments. vous pouvez définir en combinant certaines valeurs le sens de défilement.

flex-flow: row wrap ; // de gauche à droite et de haut en bas
flex-flow: row wrap-reverse ; // de gauche à droite et de bas en haut
flex-flow: row-reverse wrap ; // de droite à gauche et de haut en bas
flex-flow: row-reverse wrap-reverse ; // de droite à gauche et de haut en bas

Justify-content pour la justification

La propriété s’applique au flex-container, le parent.

justify-content : flex-start | flex-end | center | space-between | space-around

Ainsi vous pouvez contrôler la distribution de l’espace disponible sur chaque ligne.

Vous pouvez noter le ressemblance avec text-align

Vous pouvez déterminer l’alignement d’éléments sur l’axe principal en fonction de 5 valeurs :

  • flex-start : les éléments sont alignés sur le début de l’axe principal
  • flex-end : les éléments sont alignés sur la fin de l’axe principal
  • center : les éléments sont centrés sur l’axe principal
  • space-between : les éléments sont alignés sur le début de l’axe. Le premier élément touche le début de l’axe et le dernier élément touche la fin de l’axe (justification). Ainsi, la distribution est faite de manière équitable sur l’axe principal
  • space-around : le éléments sont réparti de façon équitable avec des espaces identiques sauf pour les bords avec un demi espace avant le premier élément et après le dernier
flexbox - justify-content

Align-items pour aligner le contenu

La propriété s’applique au flex-container, le parent.

align-items: flex-start | flex-end | center | baseline | stretch

La propriété définit l’alignement sur l’axe secondaire avec 5 valeurs :

  • flex-start : tous les éléments s’alignent vers le début de l’axe secondaire
  • flex-end : tous les éléments s’alignent vers la fin de l’axe secondaire
  • center : tous les éléments sont centrés sur l’axe secondaire
  • baseline : tous les éléments s’alignent sur leur axe secondaire
  • stretch : Appliqué par défaut, tous les éléments s’étirent dans leur conteneur pour remplir tout l’espace
flexbox - align-items

Align-content pour répartir des lignes

La propriété s’applique au flex-container, le parent.

La gestion de l’ordre dans lequel des éléments vont être alignés est géré par la propriété order. Comme pour la propriété z-index, le(s) élément(s) qui ont la valeur la plus proche est 0 sont alignés en premier.

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Cette propriété répartie des lignes en fonction de l’espace disponible de 6 façons différentes sur l’axe secondaire.

  • flex-start : regroupement de plusieurs lignes au début de conteneur
  • flex-end : regroupement de lignes à la fin du conteneur
  • center : toutes les lignes sont centrées dans le conteneur
  • space-between : la première ligne touche le début du conteneur et la dernière ligne touche la fin du conteneur pour une distribution de manière équitable
  • space-around : Tous les espaces sont identiques sauf sur les bords ou un demi espace est laissé avant la première et après la dernière ligne
  • stretch : toutes les lignes s’étirent pour occuper l’espace restant
flexbox - align-content

Flex-grow pour l’accroissement d’élément(s)

La propriété s’applique aux flex-items, les enfants

flex-grow: <number>

Cette propriété prend la valeur d’un entier positif pour que l’élément prenne plus de place que les autres.

flexbox - flexgrow

Le .item: pourra correspondre à la balise <li> et le nth-of-type(2) permettra de sélectionner le deuxième élément de la liste

Flex-shrink pour le rétrécissement d’élément(s)

La propriété s’applique aux flex-items, les enfants

flex-shrink: <number>

C’est l’inverse de la propriété précédente pour réduire un élément par rapport à d’autres.

Bibliographie

GOETTER, raphaël. CSS3 : Pratique du design web, Eyrolles, 2015. 372 p. ISBN 9782212140231

signature Pierre-Christophe

1 Commentaire

  • Henri J. TEOUA 25/08/2018 à 12:44

    Merci article bien détails je vais m’en servir pour comprendre et bien apprendre le CSS le nerf de la guerre.

    Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.