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édéié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;
}
.enfant {
    width: 20%;
}

La propriété display du parent est : 

Item 1
Item 2
Item 3

Il n’est ainsi plus besoin d’utiliser les propriétés float, ou inline-block.

Orientation

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

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

.parent {
    display: flex;
}
.enfant {
    flex-direction: column;
}
Item 1
Item 2
Item 3

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-around.

La notion d’axe principal (et la raison de flex-start et pas un hypothétique flex-left) est que le point de départ d’un texte n’est pas nécessairement la gauche. En arabe ou hébreu, le texte s’écrit de droite à gauche ; ce qui se code grace à un attribut dir="rtl". Si on établit flex-direction à la valeur column ou column-reverse, l’axe principal devient vertical.

flex-start

Item 1
Item 2
Item 3

Les éléments sont groupés au début de la ligne. C’est la valeur par défaut.

flex-end

Item 1
Item 2
Item 3

Les éléments sont groupés à la fin de la ligne.

space-between

Item 1
Item 2
Item 3

Les éléments sont distribués au long de la ligne ; le premier en début de ligne, le dernier en fin de ligne.

space-around

Item 1
Item 2
Item 3

Les éléments sont distribués au long de la ligne avec un même espace autour de chacun. Noter que les espaces ne sont pas visuellement équivamlents, chaque élément successif ayant le même espace sur chacun de ses côtés.

center

Item 1
Item 2
Item 3

Les éléments sont centrés dans la ligne.

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.

Start

Item 1
Item 2
Item 3

End

Item 1
Item 2
Item 3

Center

Item 1
Item 2
Item 3

Baseline

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

L’alignement se fait sur la ligne de base la plus importante.

Stretch

Item 1
Item 2
Item 3

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. Leur largeur n’est pas explicitement spécifiée (ils ne sont pas non plus en display:inline-block ni en float:left).

Ci-dessous, 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;.

Item 1
Item 2
Item 3

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.

Chris Coyier, auteur du site CSS Tricks, en offre un aperçu complet ici : A Complete Guide to Flexbox

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.