Gérer l’alignement des éléments flexibles

Dans la leçon précédente, nous avons vu comment définir l’axe principal d’un conteneur flexible et avons appris à gérer la direction des éléments dans ce conteneur.

Le modèle des boites flexibles va nous permettre d’aller plus loin et de définir l’alignement des éléments à l’intérieur du conteneur selon l’axe principal ou l’axe secondaire.

Dans cette nouvelle leçon, nous allons apprendre à aligner les éléments d’un conteneur flexible par rapport à leur axe principal ou secondaire en nous servant des propriétés suivantes :

• justify-content ;
• align-items ;
• align-content ;
• align-self.

Attention : cette partie n’est pas simple. Il faudra bien comprendre les concepts d’axe principal et d’axe secondaire et bien se représenter mentalement l’espace que prend une ligne ou une colonne et l’espace que prennent les éléments dans chaque ligne ou colonne. J’ai essayé d’illustrer au maximum pour que vous puissiez bien vous représenter tout cela. N’hésitez pas à faire des pauses, à lire la leçon plusieurs fois et à expérimenter !

 

Gérer l’alignement des éléments selon l’axe principal avec justify-content

La propriété justify-content nous permet d’aligner les éléments d’un conteneur flexibles selon l’axe principal.

Plus précisément, cette propriété va nous permettre de définir de quelle manière doit être distribué l’espace restant dans le conteneur. On va l’appliquer au conteneur et pouvoir lui passer l’une des valeurs suivantes :

• flex-start : Valeur par défaut. Les éléments vont être concentrés au début du conteneur (selon leur axe principal) ;
• flex-end : Les éléments vont être concentrés à la fin du conteneur (selon leur axe principal) ;
• center : Les éléments vont être centrés dans le conteneur (selon leur axe principal) ;
• space-between : Les éléments vont être régulièrement distribués dans le conteneur. Les éléments se trouvant contre un bord du conteneur vont être collés au bord ;
• space-around : Les éléments vont être régulièrement distribués dans le conteneur. Chaque élément va posséder le même espace et les espaces vont être cumulatifs entre deux éléments, ce qui fait que la taille de l’espace entre le conteneur et un élément contre le bord du conteneur sera deux fois plus petite qu’entre deux éléments ;
• space-evenly Les éléments vont être régulièrement distribués dans le conteneur. L’espace entre le bord du conteneur et un élément sera le même que celui entre deux éléments.

Prenons immédiatement un exemple pour illustrer le fonctionnement de cette propriété :

See the Pen Cours HTML CSS 13.3.1 by Pierre (@pierregiraud) on CodePen.

Dans cette première série d’exemples, notre axe principal est l’axe horizontal et nos éléments flexibles n’occupent qu’une seule ligne dans leur conteneur. La direction d’affichage des éléments est celle du sens de la lecture (de gauche à droite).

Ici, la valeur flex-start va aligner les éléments au début du conteneur c’est-à-dire dans le cas présent à gauche de celui-ci tandis que flex-end va les aligner sur la droite et que flex-center va nous permettre de centrer horizontalement les éléments dans le conteneur.

Comme vous pouvez le voir, l’espace vide est régulièrement distribué dans le conteneur avec les valeurs space-between, space-around et space-evenly. La seule différence entre ces valeurs va être l’espace qui va être attribué entre les bords du conteneur et les éléments collés contre les bords.

La propriété justify-content va se comporter exactement de la même façon dans le cas où les éléments occupent plusieurs lignes dans le conteneur :

See the Pen Cours HTML CSS 13.3.2 by Pierre (@pierregiraud) on CodePen.

Regardons de plus près les valeurs space-between, space-around et space-evenly : vous pouvez remarquer que l’espace entre le premier élément et le dernier élément de chaque ligne et le bord du conteneur va être le même pour chaque ligne d’éléments. Ce comportement est tout à fait normal et voulu.

Enfin, la propriété justify-content va à nouveau avoir le même effet si l’axe principal est l’axe vertical.

See the Pen Cours HTML CSS 13.3.3 by Pierre (@pierregiraud) on CodePen.

Cette fois-ci, la valeur flex-start va nous permettre d’aligner les éléments en haut du conteneur tandis que flex-end va nous permettre de les aligner en bas de celui-ci et que center va les centrer verticalement dans le conteneur.

De la même manière c’est l’espace vide dans le sens de la hauteur qui sera distribué régulièrement avec les valeurs space-between, space-around et space-evenly.

Ici, faites bien attention à ne pas confondre les effets des propriétés justify-content et flex-direction : la propriété justify-content va gérer la distribution de l’espace vide dans le conteneur tandis que flex-direction va permettre d’indiquer un axe et ou une direction pour nos éléments flexibles et va donc justement permettre de définir où est le « début » et la « fin » du conteneur.

See the Pen Cours HTML CSS 13.3.4 by Pierre (@pierregiraud) on CodePen.

Ce que vous devez absolument comprendre ici est que dans le cas où la valeur de flex-direction est row, l’axe principal sera horizontal et le début du conteneur sera son bord gauche.

En revanche, dans le cas où flex-direction vaut row-reverse, alors le début du conteneur sera son bord droit.

La propriété justify-content va ensuite aligner les éléments du début du conteneur. Ainsi, lorsqu’on applique un justify-content : flex-start sur un conteneur dont la direction est flex-direction : row-reverse, l’effet va être de concentrer les éléments sur la droite du conteneur puisque le début du conteneur correspond à son bord droit.

Note : Tous ces concepts de direction sont dépendants de la direction de l’écriture de votre document. Si votre document est défini dans une langue dont l’écriture se fait de droite à gauche alors le début d’un conteneur flexible dont la direction a été définie avec flex-direction : row sera son bord droit.

 

Gérer l’alignement des éléments selon l’axe secondaire

La gestion de l’alignement des éléments flexibles selon l’axe secondaire va pouvoir se faire de différentes façons et avec plusieurs propriétés :

• La propriété align-items va nous permettre de gérer l’alignement des éléments au sein d’une ligne (ou d’une colonne selon les axes principal et secondaires choisis) dans l’axe secondaire ;
• La propriété align-content va nous permettre de gérer l’alignement des lignes (ou des colonnes selon l’axe) les unes par rapport aux autres dans l’axe secondaire et ne va donc avoir un effet que si nous avons plusieurs lignes (ou colonnes) d’éléments flexibles ;
• La propriété align-self va nous permettre de gérer l’alignement d’un élément flexible en particulier dans l’axe secondaire.

A partir d’ici, nous allons avoir besoin d’avoir des éléments flexibles de différentes tailles pour bien voir l’effet des différentes propriétés. Pour le moment, je vais me contenter de modifier la hauteur des éléments en attribuant à certains éléments un padding haut et bas en sachant que dans les exemples suivants l’axe principal sera l’axe horizontal sauf mention contraire.

Gérer l’alignement des éléments dans une ligne ou dans une colonne selon l’axe secondaire avec align-items

La propriété align-items va nous permettre de définir l’alignement des éléments flexibles au sein d’une ligne (ou d’une colonne) selon l’axe secondaire.

Cette propriété est l’équivalent de la propriété justify-content mais va permettre l’alignement des éléments selon leur axe secondaire et non pas principal cette fois-ci.

Nous allons une nouvelle fois devoir définir align-items pour le conteneur flexible et allons pouvoir lui passer les valeurs suivantes :

• stretch : Valeur par défaut. Les éléments vont s’étirer dans leur axe secondaire jusqu’à remplir tout l’espace disponible ;
• flex-start : Les éléments vont être placés au début de leur conteneur en fonction de l’axe secondaire ;
• flex-end : Les éléments vont être placés à la fin de leur conteneur en fonction de l’axe secondaire ;
• center : Les éléments vont être placés au milieu de leur conteneur en fonction de l’axe secondaire ;
• baseline : Les éléments vont être alignés dans leur axe secondaire de telle sorte à ce que leurs lignes de base (ligne imaginaire sur laquelle est écrit le texte) soient alignées.

See the Pen Cours HTML CSS 13.3.5 by Pierre (@pierregiraud) on CodePen.

Dans les exemples ci-dessus, l’axe principal de mon conteneur flexible est l’axe horizontal et l’axe secondaire est donc l’axe vertical.

La propriété align-items va donc impacter l’alignement des éléments selon l’axe vertical qui est ici l’axe secondaire.

Par défaut, un conteneur va posséder la même hauteur que le plus grand de ses éléments. Ici, la hauteur de mes éléments dépend de leur contenu et des propriétés padding et border.

Afin que l’effet des propriétés liées à l’alignement que l’on va étudier soit bien visible, je donne une hauteur fixe plus grande que celle de mes éléments à mon conteneur pour créer de l’espace vide.

Comme vous pouvez le constater, la valeur stretch va ici étirer les éléments de façon à ce qu’ils occupent tout l’espace disponible dans leur conteneur selon leur axe secondaire qui est ici l’axe vertical.

La valeur flex-start va ici aligner les éléments en haut du conteneur ce qui correspond au début du conteneur dans l’axe vertical tandis que la valeur flex-end va avoir l’effet contraire.

La valeur center nous permet ici très simplement de centrer verticalement les éléments dans leur conteneur.

Finalement, la valeur baseline permet d’aligner les éléments selon leur ligne de base qui est la ligne sur laquelle sont écrits les textes.

De manière similaire, si l’axe vertical est défini comme axe principal pour un conteneur flexible, alors la propriété align-items alignera les éléments selon leur axe horizontal.

See the Pen Cours HTML CSS 13.3.6 by Pierre (@pierregiraud) on CodePen.

Bien évidemment, nous allons pouvoir utiliser les propriétés justify-content et align-items ensemble pour aligner les éléments à la fois selon leur axe principal et selon leur axe secondaire.

See the Pen Cours HTML CSS 13.3.7 by Pierre (@pierregiraud) on CodePen.

Ici, les éléments de notre premier conteneur se placent au début de celui-ci selon l’axe principal qui est l’axe horizontal c’est-à-dire à gauche et à la fin selon l’axe secondaire (axe vertical) c’est-à-dire en bas.

Les éléments du deuxième conteneur s’alignent à la fin de celui-ci à la fois selon l’axe principal et selon l’axe secondaire c’est-à-dire à droite et en bas.

Les éléments de notre troisième conteneur sont centrés à la fois dans l’axe principal et dans l’axe secondaire, ils vont ainsi être centrés à la fois horizontalement et verticalement dans le conteneur. On va ainsi très simplement pouvoir obtenir un centrage parfait en utilisant le flexbox.

Les éléments de notre quatrième conteneur ont un alignement de type space-around (distribution régulière) selon leur axe principal (horizontal) et sont centrés selon leur axe secondaire c’est-à-dire centrés verticalement.

Les propriétés flex-wrap et align-items

Il convient ici de ne pas confondre les effets des propriétés flew-wrap et align-items. La propriété flex-wrap va définir la possibilité pour les éléments qui dépassent du conteneur de se placer sur une nouvelle ligne ou une nouvelle colonne.

Lorsqu’on autorise les éléments à se placer sur une nouvelle ligne ou une nouvelle colonne, c’est-à-dire lorsqu’on passe les valeurs wrap ou wrap-reverse à la propriété flex-wrap, alors cette propriété va également définir la direction de l’axe secondaire.

Par défaut, la direction liée à la valeur wrap va être de gauche à droite si l’axe secondaire est l’axe horizontal et de haut en bas si l’axe secondaire est l’axe vertical.

Au contraire, si la valeur de flex-wrap est wrap-reverse, alors la direction de l’axe secondaire sera de droite à gauche si c’est l’axe horizontal et de bas en haut si l’axe secondaire est l’axe vertical.

La propriété align-items va elle définir l’alignement des éléments dans chaque ligne (ou colonne) selon leur axe secondaire. Le résultat lié aux valeurs de align-items va être intimement lié à la direction définie pour l’axe secondaire.

Un flex-flow : row wrap-reverse par exemple va définir que l’axe principal est l’axe horizontal et que sa direction pour nous va être de gauche à droite et que la direction de l’axe vertical sera inversée c’est-à-dire partir du bas (début) vers le haut (fin) pour nous.

Ainsi, si on applique également un align-items : flex-end au conteneur flexible, les éléments se placeront à la fin de leur ligne dans le conteneur selon l’axe secondaire c’est-à-dire… en haut de leur ligne !

See the Pen Cours HTML CSS 13.3.8 by Pierre (@pierregiraud) on CodePen.

Gérer l’alignement des lignes ou des colonnes les unes par rapport aux autres selon l’axe secondaire avec align-content

La propriété align-content ne va pas nous permettre de gérer l’alignement des éléments au sein d’une ligne ou d’une colonne mais plutôt de gérer l’alignement des différentes lignes (ou colonnes) les unes par rapport aux autres.

Cette propriété n’aura d’effet que si le conteneur flexible possède plusieurs lignes (si l’axe principal est horizontal) ou plusieurs colonnes (si l’axe principal est vertical).

On va à nouveau définir cette propriété au niveau de notre conteneur et allons pouvoir lui passer une des valeurs suivantes :

• stretch : Valeur par défaut. Les lignes (ou les colonnes) vont essayer de s’étendre pour prendre tout l’espace disponible dans le conteneur ;
• flex-start : Les lignes (ou les colonnes) vont être concentrées au début du conteneur ;
• flex-end : Les lignes (ou les colonnes) vont être concentrées à la fin du conteneur;
• center : Les lignes (ou les colonnes) vont être concentrées au milieu du conteneur;
• space-between : Les lignes (ou les colonnes) vont être régulièrement distribuées dans le conteneur. La première ligne (ou colonne) va être collée contre le début du conteneur et la dernière sera collée contre la fin du conteneur ;
• space-around : Les lignes (ou les colonnes) vont être régulièrement distribuées dans le conteneur. L’espace autour de chaque ligne (colonne) va être le même et cumulatif entre deux lignes (colonnes).

Il convient de ne pas confondre align-items et align-content. En effet, ces deux propriétés agissent sur des choses différentes.

Imaginez un conteneur flexible défini avec flex-flow : row wrap et contenant deux lignes d’éléments. En appliquant un align-items : flex-start, les éléments du conteneur vont être placé au début de celui-ci selon leur axe secondaire c’est-à-dire en haut de celui-ci ou plus exactement les différents éléments vont être placés au début de leur ligne.

En effet, chaque ligne (ou chaque colonne) d’un conteneur flexible agit indépendamment des autres et peut être considérée comme un conteneur à part. Les conteneurs flexibles ont été créés comme cela justement pour nous donner un contrôle sur les éléments dans les lignes (colonnes) et sur les lignes (colonnes) en soi.

La propriété align-content va-elle donc nous permettre ensuite d’aligner les lignes ou colonnes du conteneur.

Regardez l’exemple ci-dessous pour bien comprendre :

See the Pen Cours HTML CSS 13.3.9 by Pierre (@pierregiraud) on CodePen.

L’axe secondaire pour chacun de nos conteneurs flexibles est l’axe vertical. On définit un align-items : flex-start pour notre premier conteneur mais pas de align-content. La valeur par défaut stretch sera donc utilisée. Les lignes vont donc prendre chacune le maximum d’espace dans le conteneur c’est-à-dire 50% chacune et les éléments vont se placer au début de chaque ligne grâce à align-items : flex-start.

Ici, vous devez bien comprendre que le fait qu’une ligne s’étende au maximum dans le conteneur ne signifie pas que les éléments qu’elle contient vont également s’étendre.

Pour notre deuxième conteneur, on demande cette fois-ci aux lignes de se positionner au début du conteneur. Les lignes vont donc se concentrer en haut du conteneur et avoir par défaut une hauteur égale à celle du plus grand des éléments de la ligne.

On ne définit cette fois-ci pas de valeur pour align-items. La valeur par défaut, stretch va donc être utilisée et les éléments vont s’étendre un maximum dans la ligne.

On définit pour notre troisième conteneur un align-items : flex-start et un align-content : flex-start. Les lignes vont donc se concentrer au début du conteneur et les éléments vont se concentrer au début de la ligne.

Finalement, on définit un align-items : flex-end et un align-content : flex-start pour notre quatrième conteneur. Les lignes vont don à nouveau se concentrer en début de conteneur mais les éléments vont cette fois-ci se concentrer à la fin de leur ligne.

Gérer l’alignement d’un élément en particulier dans son axe secondaire avec align-self

La propriété align-self va finalement nous permettre de gérer l’alignement d’un élément en particulier dans une ligne (ou une colonne) selon l’axe secondaire.

Nous allons cette fois-ci non pas appliquer la propriété au conteneur mais bien aux éléments flexibles et allons pouvoir lui passer les mêmes valeurs qu’à align-items à savoir :

• stretch ;
• flex-start ;
• flex-end ;
• center ;
• baseline ;

Cette propriété va surcharger la valeur de align-items pour les éléments pour lesquels elle a été définie. Cela signifie en d’autres termes que ce sera la valeur de align-self qui sera retenue pour l’alignement par-dessus la valeur de align-items.

De manière similaire à align-items, cette propriété n’aura un effet visible que si la ligne (ou la colonne) est plus grande que les éléments qu’elle contient, c’est-à-dire s’il existe des espaces vides.

See the Pen Cours HTML CSS 13.3.10 by Pierre (@pierregiraud) on CodePen.

Dans cet exemple, l’axe secondaire de nos conteneurs est à nouveau l’axe vertical. Notre premier conteneur ne possède qu’une ligne. La hauteur de la ligne va ainsi être égale à celle du conteneur. On définit ici un align-items : flex-start ce qui place les éléments en haut du conteneur et on surcharge ce comportement pour un élément en particulier qu’on place en bas avec align-self : flex-end.

Notre deuxième conteneur possède deux lignes. Aucune valeur n’est définie pour align-content et c’est donc sa valeur par défaut stretch qui va s’appliquer. On place ensuite les éléments en haut de chaque ligne avec align-items et on surcharge ce comportement pour deux éléments flexibles avec align-self : flex-end ce qui va les envoyer en bas de leur ligne.