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 :

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

• « Utilisation des flexbox en CSS », Mozilla Developer Network

Des tutoriels

• « CSS3 Flexbox Layout module - Alsacreations »
• Pierre Choffé, « Flexbox, guide complet », LA CASCADE
• « A Complete Guide to Flexbox », CSS-Tricks

L'implémentation des navigateurs

• « Can I use… Support tables for HTML5, CSS3, etc », CanIUse

Les spécifications

• « CSS Flexible Box Layout Module Level 1 »

Un petit jeu pour finir

• « Flexbox Froggy »

Photo break dancer par fotosderianxo, CC-By 2.0