Flexbox

Mis en page flexible avec 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.

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

01

Appliquer flexbox comme propriété de display

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.

02

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

03

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 le pourquoi 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".

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.

04

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

05

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

06

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

07

Aller plus loin

Quelques autres possibilité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