Accueil / Blog / Métier / 2017 / Introduction à Flexbox

Introduction à Flexbox

Par Emmanuelle Helly publié 28/07/2017, édité le 31/07/2017
Aujourd'hui implémenté par tous les navigateurs récents, le module flexbox de CSS3 s'avère très pratique pour disposer et aligner des éléments sur une page web.
Introduction à Flexbox

Photo fotosderianxo CC-By 2.0

Inline-block et float c'est fini : utilisez flexbox, c'est bon pour le moral (et la productivité de votre projet).

Description des propriétés

Le principe de flexbox est simple : la propriété principale, display: flex appliquée au conteneur, assure que les éléments fils directs seront alignés sur une ligne.

Ensuite, il est possible d'inverser le sens ou d'aligner en colonne plutôt qu'en ligne, et / ou dans un ordre inverse, avec flex-direction. Pour que les éléments s'affichent sur plusieurs lignes c'est flex-wrap qu'il faut modifier.

Par défaut les items sont alignés à gauche, ce qui peut être changé avec la propriété justify-content, qui permet de les aligner également à droite, au centre, ou avec de l'espace entre les éléments ou autour. L'alignement vertical sur la ligne est assuré paralign-items. Enfin l'alignement de l'ensemble des éléments est positionné en hauteur et largeur avec la propriété align-content.

Il est ensuite possible de définir des propriétés pour chaque item : leur largeur, l'ordre d'apparition, l'espace occupé.

Toutes ces directives sont clairement expliquées sur CSS Tricks.

Mais passons maintenant aux exemples.

Disposition en trois colonnes

Notre site a besoin de trois colonnes : une partie principale et deux colonnes latérales de même largeur. Le markup html reste très simple :

<main class="main">
...
</main>

<aside class="col-1">
...
</aside>

<aside class="col-2">
...
</aside>

Après avoir appliqué la propriété display: flex à l'élément contenant les trois colonnes, celles-ci se retrouvent alignées sur une ligne.

.flex-container {
    display: flex;
}

Occuper tout l'espace

Par défaut les éléments ne prennent toute la largeur que si leur contenu en a besoin ; appliquer flex-grow: 1 à un élément fait en sorte qu'il occuppe tout l'espace disponible quel que soit son contenu.

.main {
    flex-grow: 1;
}

Il reste à fixer la même largeur pour les colonnes latérales, ce qui se fait aussi bien avec width qu'avec flex-basis.

.col-1,
.col-2 {
    flex-basis: 20%;
}

Changer l'ordre des choses

Et si on souhaite afficher d'abord la colonne 3, la propriété order permet de modifier l'ordre d'un élément.

.col-2 {
    order: -1;
}

Augmenter l'espacement

Enfin, ajouter de l'espacement (padding) ou des marges aux éléments ne pose pas de problème sur la disposition. Petite astuce, une hauteur minimale fixée à 100vh permettra d'occuper tout l'espace disponible.

.main {
    margin-left: 20px;
    margin-right: 20px;
    min-height: 100vh;
}

Grille d'éléments

Flexbox est également adapté si on souhaite afficher plusieurs éléments similaires sur la page.

<div class="gallery-container">
    <div class="gallery-item">
      <img src="images/thumb.jpg" />
    </div>
    <div class="gallery-item">
      <img src="images/thumb.jpg" />
    </div>
    ...
</div>

Et pour la CSS, simplement :

.gallery-container {
    display: flex;
}

Comme pour l'exemple précédent, les élément sont alignés sur une seule ligne.

Retourner à la ligne

On peut leur permettre de s'afficher sur plusieurs lignes en flex-wrap: wrap sur le conteneur.

Justifier le contenu

La propriété justify-content ajuste l'alignement horizontal, à gauche, centré ou à droit, ou encore avec de l'espace autour (space-around) ou entre chaque élément (space-between) : à appliquer également au conteneur.

Mettre en avant

Et si on souhaite mettre le premier et le deuxième élément en avant :

.gallery-item:nth-child(1) {
    flex-basis: 60%;
}
.gallery-item:nth-child(2) {
    flex-basis: 40%;
}

Voilà donc une petite introduction au module flexbox, utilisable dans de nombreux cas.

Aller plus loin

La documentation sur Mozilla Developper Network

Des tutoriels

L'implémentation des navigateurs

Les spécifications

Un petit jeu pour finir

Photo break dancer par fotosderianxo, CC-By 2.0

ABONNEZ-VOUS À LA NEWSLETTER !