Flexbox

Flexbox est un module CSS déjà largement implémenté dans les navigateurs (2016/2017). Il permet de définir une logique de mise en page flexible.

Au delà de ceux qui sont présents dans cette page, des exemples basiques sont disponibles dans la section dédiée.

Appliquer flexbox

Dans ce premier exemple, on peut observer ce qui se produit pour les éléments enfants (item 1, item 2 et item 3) quand leur parent (la boîte qui entoure ces trois éléments se voit appliquer le code suivant :

.parent {
    display: flex;
    /* On peut attribuer une “goutière” avec la propriété gap : */
    gap: 20px 40px; /* goutière verticale de 20px, goutière horizontale de 40px */
    gap: 20px; /* goutière uniforme */
}
.enfant {
    width: 20%;
}

Item 1
Item 2
Item 3

La propriété display du parent est : flex.

Orientation

Par défaut, les éléments enfants d’un élément flexbox vont s’organiser horizontalement : la valeur de la propriété flex-direction du parent est row.

Les valeurs possibles sont row, row-reverse (qui inverse l’ordre…), column, et column-reverse.

.parent {
    display: flex;
    flex-direction: column;
}

flex-direction :

Item 1
Item 2
Item 3

La propriété flex-direction du parent (l’axe principal) est : column.

Alignement sur l’axe principal

Pour décider de l’alignement des éléments enfants, on peut utiliser la propriété justify-content, qui accepte une des cinq valeurs suivantes : flex-start, flex-end, center, space-between, space-evenly & space-around.

Si on établit flex-direction à la valeur column ou column-reverse, l’axe principal devient vertical.

justify-content :

Item 1
Item 2
Item 3

Alignement sur l’axe transversal

On peut utiliser la propriété align-items pour décider de l’alignement des éléments enfants sur l’axe transversal (perpendiculaire à l’axe principal). align-items accepte l’une des cinq valeurs suivantes : flex-start, flex-end, center, baseline & stretch

Dans cette série d’exemples, aucun des éléments enfants ne s’est vue attribué de hauteur explicite. La hauteur des parents est de 80px.

align-items:

Item 1
Item 2 (.75em)
Item 3 (1.3em)

Répartir l’espace

Flex permet de proportionner les éléments dans leur parent.

.parent {
    display: flex;
}
.enfant {
    flex: 1;
}

Item 1
Item 2
Item 3

↑ La déclaration flex:1 a été appliquée à chacun des éléments enfant. Leurs largeurs se répartissent équitablement.

Item 1
Item 2
Item 3

↑ Ci-dessus, un exemple d’utilisation de flex: 2 sur le 2e élément uniquement (div:nth-child(2)), en gardant flex: 1 sur les autres.

Item 1
Item 2
Item 3

↑ Un autre exemple où le 2e élément (div:nth-child(2)) se voit appliqué la déclaration flex: 20;.

Ordonner

Une des plus étonnantes propriétés de flexbox est de pouvoir déterminer l’ordre d’affichage des éléments. C’est la propriété order qui régit cet ordre.

La valeur par défaut de order est 0. Dans l’exemple ci-dessous, on utilise order: 1 sur le premier élément (div:nth-child(1)) dans l’ordre du code source.

.parent > div:nth-child(1) {
  order: 1;
  background: green;
}
Item 1
Item 2
Item 3

Aller plus loin

De nombreuses autres possibilités et subtilités sont offertes par le module flexbox.

😍 Josh Comeau a publié un guide interactif à Flexbox [en] qui explore et introduit avec brio les possibilités et subtilités de ce module de mise en page.

Chris Coyier, auteur du site CSS Tricks, en offre un aperçu complet ici : A Complete Guide to Flexbox. Une “cheatsheet” visuelle est disponible sur flexboxsheet.com.

Mozilla Developper Network reste une référence complète : Mises en page avancées avec les boîtes flexibles

—

Les exemples ci-dessus sont repris – traduits et mis à jour – depuis l’article An Introduction to the CSS Flexbox Module paru sur tutsplus.com.