Nous avons toute une sélection de façons d’aligner les choses en CSS aujourd’hui, et ce n’est pas toujours une décision évidente que d’utiliser. Cependant, savoir ce qui est disponible signifie que vous pouvez toujours essayer quelques tactiques si vous rencontrez un problème d’alignement particulier, que ce soit de l’alignement vertical ou de l’alignement horizontal.

Dans cet article, je vais examiner les différentes méthodes d’alignement. Au lieu de fournir un guide complet pour chacun d’entre eux, j’expliquerai quelques-uns des points de friction que les gens ont et j’indiquerai des références plus complètes pour les propriétés et les valeurs. Comme avec la plupart des CSS, vous pouvez faire un long chemin en comprenant les choses fondamentales sur la façon dont les méthodes se comportent, et ensuite besoin d’un endroit pour aller chercher les détails plus fins en termes de la façon dont vous obtenez la mise en page précise que vous voulez.

Alignement du texte et des éléments en ligne

Lorsque nous avons du texte et d’autres éléments en ligne sur une page, chaque ligne de contenu est traitée comme une zone de ligne. La propriété text-align alignera ce contenu sur la page, par exemple, si vous voulez que votre texte soit centré ou justifié. Toutefois, il se peut que vous souhaitiez parfois aligner des éléments de cette zone de ligne avec d’autres éléments, par exemple, si une icône est affichée à côté du texte ou si le texte est de tailles différentes.

Dans l’exemple ci-dessous, j’ai du texte avec une image en ligne plus grande. J’utilise vertical-align : middle sur l’image pour aligner le texte au milieu de l’image.

See the Pen Alignement élément en ligne : vertical-align by Siddhy (@Siddhyn) on CodePen.


La propriété line-height et l’alignement

N’oubliez pas que la propriété line-height changera la taille de la boîte de ligne et peut donc changer votre alignement. L’exemple suivant utilise une grande hauteur de ligne de 150px, et j’ai aligné l’image vers le haut. L’image est alignée sur le haut de la boîte de ligne et non sur le haut du texte, supprimez cette hauteur de ligne ou rendez-la inférieure à la taille de l’image et l’image et le texte seront alignés en haut du texte.

See the Pen Alignement élément en ligne : vertical-align [2] by Siddhy (@Siddhyn) on CodePen.


Il s’avère que la hauteur de la ligne et la taille du texte sont assez compliquées, et je ne vais pas m’attarder sur cette particularité dans cet article. Si vous essayez d’aligner précisément les éléments en ligne et que vous voulez vraiment comprendre ce qui se passe, je vous recommande de lire “Deep Dive CSS : Métriques de police, hauteur de ligne et alignement vertical.

Quand puis-je utiliser la propriété vertical-align ?

La propriété d’alignement vertical est utile si vous alignez un élément en ligne. Ceci inclut les éléments avec affichage : inline-block. Le contenu des cellules d’un tableau peut également être aligné avec la propriété d’alignement vertical.

La propriété d’alignement vertical n’a aucun effet sur les éléments de flex ou de grille et, par conséquent, si elle est utilisée dans le cadre d’une stratégie de repli, cessera de s’appliquer dès que l’élément parent sera transformé en grille ou conteneur flex. Par exemple, dans le code suivant, j’ai un ensemble d’éléments disposés avec affichage : inline-block et cela signifie que j’ai la possibilité d’aligner les éléments même si le navigateur n’a pas Flexbox :

See the Pen Alignement en inline-block by Siddhy (@Siddhyn) on CodePen.


Dans ce prochain bout de code, j’ai traité le bloc en ligne comme une solution de repli pour la mise en page Flex. Les propriétés d’alignement ne s’appliquent plus, et je peux ajouter des éléments d’alignement pour aligner les éléments dans Flexbox. Vous pouvez vérifier que la méthode Flexbox est en place si l’écart entre les éléments que vous obtenez en utilisant l’affichage inline-block a disparu.

See the Pen Alignement en ligne avec solution de repli en Flex by Siddhy (@Siddhyn) on CodePen.


Le fait que l’alignement vertical fonctionne sur les cellules du tableau est la raison pour laquelle l’astuce pour centrer verticalement un élément en utilisant l’affichage : table-cell fonctionne.

Maintenant que nous avons de meilleurs moyens d’aligner les boîtes en CSS (comme nous le verrons dans la section suivante), nous n’avons pas besoin d’utiliser les propriétés d’alignement vertical et d’alignement de texte à des endroits autres que les éléments en ligne et de texte pour lesquels ils ont été conçus. Cependant, ils sont toujours tout à fait valides dans ces formats texte et en ligne, et n’oubliez pas que si vous essayez d’aligner quelque chose en ligne, ce sont ces propriétés et non celles de l’alignement des boîtes que vous devez utiliser.

L’alignement des boites

La spécification d’alignement des boîtes traite de la façon dont nous alignons tout le reste. La spécification détaille les propriétés d’alignement suivantes :

  • justify-content
  • align-content
  • justify-self
  • align-self
  • justify-items
  • align-items

Vous pensez peut-être déjà à ces propriétés comme faisant partie de la spécification Flexbox, ou peut-être de grid. L’histoire des propriétés est qu’elles proviennent de Flexbox, et qu’elles existent toujours dans la spécification de niveau 1 ; cependant, elles ont été déplacées dans leur propre spécification lorsqu’il est devenu évident qu’elles étaient plus généralement utiles. Nous les utilisons maintenant également dans Grid Layout, et ils sont également spécifiés pour d’autres méthodes de mise en page, bien que la prise en charge actuelle du navigateur signifie que vous ne pourrez pas les utiliser tout de suite.

Par conséquent, la prochaine fois que quelqu’un sur Internet vous dira que l’alignement vertical est la partie la plus difficile du CSS, vous pourrez le lui dire (ce qui tient même dans un tweet) :

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

A l’avenir, nous pourrons peut-être même nous passer de l’affichage : flex, une fois que les propriétés d’alignement des boîtes seront implémentées pour la disposition des blocs. Pour le moment, cependant, faire du parent de la chose que vous voulez centrer un conteneur flexible est le moyen d’obtenir un alignement horizontal et vertical.

Les 2 types d’alignement

Lors de l’alignement des éléments de flex et de grid, vous avez deux possibilités d’alignement :

  1. Vous disposez de l’espace libre dans la grille ou le conteneur flexible (une fois que les postes ou les pistes ont été disposés).
  2. Vous avez également l’élément lui-même à l’intérieur de la zone de la grille dans laquelle vous l’avez placé, ou sur l’axe transversal à l’intérieur du conteneur flexible.

Je vous ai montré un ensemble de propriétés ci-dessus, et les propriétés d’alignement peuvent être considérées comme deux groupes. Celles qui traitent de la répartition de l’espace libre et celles qui alignent l’élément lui-même.

Traitement de l’espace libre : align-content et justify-content

Les propriétés qui se terminent par -content concernent la distribution de l’espace, donc lorsque vous choisissez d’utiliser align-content ou justify-content, vous distribuez l’espace disponible entre les éléments de grille ou les éléments de flex. Ils ne modifient pas la taille des éléments de flex ou de la grille eux-mêmes ; ils les déplacent parce qu’ils changent l’emplacement de l’espace libre.

Ci-dessous, j’ai un exemple de flex et un exemple de grid. Les deux ont un conteneur qui est plus grand que nécessaire pour afficher les éléments de flex ou les pistes de grille, donc je peux utiliser align-content et justify-content pour distribuer cet espace.

See the Pen justify-content et align-content by Siddhy (@Siddhyn) on CodePen.


Déplacer les éléments autours : justify-self, align-self, justify-items et align-items

Nous avons ensuite align-self et justify-self appliqués à des éléments individuels de flex ou de grille ; vous pouvez également utiliser align-items et justify-items sur le conteneur pour définir toutes les propriétés à la fois. Ces propriétés concernent l’élément flex ou grid proprement dit, c’est-à-dire le déplacement du contenu à l’intérieur de la zone de grille ou de la ligne flex.

  • Grid Layout : Vous obtenez les deux propriétés car vous pouvez déplacer l’élément sur le bloc et sur l’axe en ligne.
  • Flex Layout : Vous ne pouvez vous aligner que sur l’axe transversal car l’axe principal est contrôlé par la seule répartition de l’espace. Ainsi, si vos éléments sont une rangée, vous pouvez utiliser align-self pour les décaler vers le haut et vers le bas à l’intérieur de la ligne flexible, en les alignant les uns contre les autres.

Dans mon exemple ci-dessous, j’ai un conteneur flex et un conteneur de grille, et j’utilise align-items et align-self dans Flexbox pour déplacer les éléments de haut en bas les uns contre les autres sur l’axe transversal. Si vous utilisez Firefox, et inspectez l’élément à l’aide de l’inspecteur Firefox Flexbox Inspector, vous pouvez voir la taille du conteneur flex et comment les éléments sont déplacés verticalement à l’intérieur.

Dans la grille, je peux utiliser les quatre propriétés pour déplacer les éléments à l’intérieur de leur zone de grille. Une fois de plus, l’inspecteur de grille DevTools de Firefox sera utile pour jouer avec l’alignement. Lorsque les lignes de la grille sont superposées, vous pouvez voir la zone à l’intérieur de laquelle le contenu est déplacé.

Jouez avec les valeurs de la démo CodePen pour voir comment vous pouvez déplacer le contenu dans chaque méthode de présentation :

See the Pen justify-self, align-self, justify-items, align-items by Siddhy (@Siddhyn) on CodePen.


Confusions autour de align et justify

L’un des problèmes cités avec les personnes qui se souviennent des propriétés d’alignement dans Grid et Flexbox, c’est que personne ne peut se rappeler s’il faut aligner ou justifier. Quelle direction est laquelle ?

Pour la disposition de la grille, vous devez savoir si vous vous alignez dans la direction Bloc ou en ligne. La direction Bloc est la direction des blocs disposés sur votre page (dans votre mode d’écriture), c’est à dire vertical pour le français. La direction Inline est la direction dans laquelle les phrases se lisent (donc pour le français de gauche à droite horizontalement).

Pour aligner les choses dans le sens du bloc, vous utiliserez les propriétés qui commencent par align-. Vous utilisez align-content pour distribuer l’espace entre les éléments de la grille, s’il y a de l’espace libre dans le conteneur de la grille, et align-items ou align-self pour déplacer un élément dans la zone de la grille où il a été placé.

L’exemple ci-dessous présente deux modèles de grille. L’un a un mode d’écriture : horizontal-tb (qui est le mode par défaut pour le français) et l’autre mode d’écriture : vertical-rl. C’est la seule différence entre eux. Vous pouvez voir que les propriétés d’alignement que j’ai appliquées fonctionnent exactement de la même manière sur l’axe du bloc dans les deux modes.

See the Pen Alignement des blocs sur l’axe by Siddhy (@Siddhyn) on CodePen.


Pour aligner les éléments dans la direction en ligne, utilisez les propriétés qui commencent par justify-. Utilisez le justify-content pour répartir l’espace entre les éléments de la grille, et justify-items ou justify-self pour aligner les éléments à l’intérieur de leur zone de grille dans la direction en ligne.

Encore une fois, j’ai deux exemples de disposition de grille pour que vous puissiez voir que inline est toujours inline – quel que soit le mode d’écriture que vous utilisez.

See the Pen Alignement inline sur l’axe by Siddhy (@Siddhyn) on CodePen.


Flexbox est un peu plus délicat du fait que nous avons un axe principal qui peut être changé en ligne ou en colonne. Pensons d’abord à cet axe principal. Il est réglé avec la propriété flex-direction. La valeur initiale (ou par défaut) de cette propriété est la ligne qui affichera les éléments flex sous forme de ligne dans le mode d’écriture actuellement utilisé – c’est pourquoi lorsque nous travaillons en français, nous obtenons des éléments disposés horizontalement lorsque nous créons un conteneur flex. Vous pouvez alors changer l’axe principal en flex-direction: column et les éléments seront disposés comme une colonne, ce qui signifie qu’ils seront disposés dans le sens du bloc pour ce mode d’écriture.

Comme nous pouvons faire ce changement d’axe, le facteur le plus important dans Flexbox est de demander : “Quel est mon axe principal ?” Une fois que vous savez ça, alors pour l’alignement (lorsque vous êtes sur votre axe principal) vous utilisez simplement le justify-content. Peu importe que votre axe principal soit une ligne ou une colonne. Vous contrôlez l’espace entre les éléments de flex avec justify-content.

See the Pen Flexbox : la proiprieté justify-content by Siddhy (@Siddhyn) on CodePen.


Sur l’axe transversal, vous pouvez utiliser align-items qui alignera les éléments à l’intérieur du conteneur flex ou de la ligne flex dans un conteneur flex multiligne. Si vous disposez d’un conteneur à plusieurs lignes utilisant flex-wrap : wrap ET assez d’espace dans ce conteneur, vous pouvez utiliser align-content pour distribuer l’espace sur l’axe transversal.

Dans l’exemple ci-dessous, nous faisons les deux avec un conteneur flex affiché sous forme de ligne et de colonne :

See the Pen Flexbox : alignement transversal by Siddhy (@Siddhyn) on CodePen.


Quand justify-content ou align-content ne fonctionnent pas

Les propriétés de justify-content et align-content dans Grid et Flexbox ont pour but de distribuer de l’espace supplémentaire. Ce qu’il faut donc vérifier, c’est que vous avez assez d’espace.

Voici un exemple de Flex : J’ai mis flex-direction : row et j’ai 4 éléments. Ils ne prennent pas tout l’espace dans le conteneur flex, donc j’ai de l’espace libre sur l’axe principal, la valeur initiale de justify-content est flex-start et ainsi mes éléments sont tous alignés au début et l’espace supplémentaire est à la fin. J’utilise l’inspecteur Firefox Flex Inspector pour mettre en évidence l’espace.

Comment aligner verticalement ou horizontalement en CSS ?

Si je change justify-content en space-between, cet espace supplémentaire est maintenant réparti entre les éléments :

Comment aligner verticalement ou horizontalement en CSS ?

Si j’ajoute maintenant plus de contenu à mes articles pour qu’ils deviennent plus grands et qu’il n’y ait plus d’espace supplémentaire, alors justify-content ne fait rien – simplement parce qu’il n’y a pas d’espace à distribuer.

Comment aligner verticalement ou horizontalement en CSS ?

Une question courante qu’on me pose est pourquoi le contenu justifié ne fonctionne pas quand flex-direction est colonne. C’est généralement parce qu’il n’y a pas d’espace à distribuer. Si vous prenez l’exemple ci-dessus et que vous le faites avec flex-direction : column, les éléments s’afficheront en colonne, mais il n’y aura pas d’espace supplémentaire sous les éléments comme il y en a lorsque vous faites flex-direction : row. En effet, lorsque vous fabriquez un Flex Container avec display : flex, vous disposez d’un flex container au niveau du bloc, ce qui occupe tout l’espace possible dans le sens de la ligne. En CSS, les choses ne s’étirent pas dans le sens du bloc, donc pas d’espace supplémentaire.

Comment aligner verticalement ou horizontalement en CSS ?

Ajoutez une hauteur au conteneur et – tant que c’est plus que nécessaire pour afficher les éléments – vous avez de l’espace supplémentaire et donc justify-content fonctionnera sur votre colonne.

Comment aligner verticalement ou horizontalement en CSS ?

Pourquoi n’y a-t-il pas de justify-self dans Flexbox ?

Grid Layout implémente toutes les propriétés pour les deux axes car nous avons toujours deux axes à traiter dans Grid Layout. Nous créons des éléments (qui peuvent laisser de l’espace supplémentaire dans le conteneur de la grille dans l’une ou l’autre dimension) et nous pouvons donc distribuer cet espace avec align-content ou justify-content. Nous avons aussi des zones de grille, et l’élément dans cette zone peut ne pas occuper tout l’espace de la zone, donc nous pouvons utiliser align-self ou justifi-self pour déplacer le contenu autour de la zone (ou align-items, justify-items pour modifier l’alignement de tous les éléments).

Flexbox n’a pas les mêmes besoins que la disposition en grille. Sur l’axe principal, tout ce que nous avons à implémenter, c’est la répartition de l’espace entre les objets. Il n’y a pas de concept de rail dans laquelle un élément flex est placé. Il n’y a donc pas de zone créée dans laquelle déplacer l’élément. C’est pourquoi il n’y a pas de propriété justifiée sur les axes principaux dans Flexbox.

Toutefois, vous souhaitez parfois pouvoir aligner un élément ou une partie du groupe de d’éléments d’une manière différente. Un modèle commun serait une barre de navigation divisée avec un élément séparé du groupe. Dans ce cas, la spécification recommande l’utilisation de marges automatiques.

Une marge automatique occupera tout l’espace dans la direction dans laquelle elle est appliquée, c’est pourquoi nous pouvons centrer un bloc (tel que notre mise en page principale) en utilisant une marge gauche et droite de la marge automatique. Avec une marge automatique des deux côtés, chaque marge essaie de prendre tout l’espace et pousse ainsi le bloc au milieu. Avec notre rangée d’éléments flex, nous pouvons ajouter margin-left: auto à l’élément sur lequel nous voulons que le fractionnement ait lieu, et tant qu’il y a de la place disponible dans le conteneur flex, vous obtenez un fractionnement. Cela se marie bien avec Flexbox car dès qu’il n’y a plus de place disponible, les éléments se comportent comme les éléments flex normaux.

See the Pen Alignement des boites : margin-auto by Siddhy (@Siddhyn) on CodePen.


Flexbox et Micro-Composants

L’une des choses que l’on oublie souvent, à mon avis, c’est l’utilité de Flexbox pour les petits travaux de mise en page, où l’on pourrait penser que vertical-align est la voie à suivre. J’utilise souvent Flexbox pour obtenir un alignement soigné des petits motifs ; par exemple, aligner une icône à côté du texte, aligner deux choses avec des tailles de police différentes, ou aligner correctement les champs et boutons du formulaire. Si vous avez du mal à obtenir quelque chose qui s’aligne bien avec vertical-align, alors essayez peut-être de faire le travail avec Flexbox. N’oubliez pas que vous pouvez également créer un conteneur flex en ligne si vous le souhaitez avec display : inline-flex.

See the Pen Alignement des boites : inline-flex by Siddhy (@Siddhyn) on CodePen.


Il n’y a aucune raison de ne pas utiliser Flexbox, ni même Grid pour les petits travaux de mise en page. Ce n’est pas seulement pour les gros morceaux de mise en page. Essayez les différentes choses qui s’offrent à vous, et voyez ce qui fonctionne le mieux.

Les gens sont souvent très désireux de savoir quelle est la bonne ou la mauvaise façon de faire les choses. En réalité, il n’y a souvent pas de bon ou de mauvais ; une petite différence dans votre modèle peut signifier la différence entre Flexbox qui fonctionne le mieux, là où autrement vous utiliseriez l’alignement vertical.

Conclusion

Pour conclure, voici un bref résumé des bases de l’alignement. Si vous vous souvenez de ces quelques règles, vous devriez pouvoir aligner la plupart des choses avec CSS :

  1. Alignez-vous du texte ou un élément en ligne ? Si c’est le cas, vous devez utiliser text-alignvertical-align, et line-height.
  2. Avez-vous un ou plusieurs éléments que vous souhaitez aligner au centre de la page ou du conteneur ? Si c’est le cas, faites du conteneur un conteneur flexible puis définissez align-items: center et justify-content: center
  3. Pour les Grid Layouts, les propriétés qui commencent par align- travaillent dans le sens du Bloc; celles qui commencent par justify- travaillent dans le sens de la ligne.
  4. Pour les Flex Layouts, les propriétés qui commencent par align- travaillent sur l’axe transversal; celles qui commencent par justify- travaillent sur l’axe principal.
  5. Les propriétés justify-content et align-content distribuent de l’espace supplémentaire. Si vous n’avez pas d’espace supplémentaire dans votre conteneur flex ou grid, ils ne feront rien.
  6. Si vous pensez que vous avez besoin justify-self dans Flexbox, alors l’utilisation d’une marge automatique vous donnera probablement le modèle que vous recherchez.
  7. Vous pouvez utiliser Grid et Flexbox avec les propriétés d’alignement pour de petits travaux de mise en page ainsi que des composants principaux – expérimentez !

Pour plus d’informations sur l’alignement, voir ces ressources :

(Traduction du superbe article de Rachel Andrew sur Smashing Magazine)

Catégories : html/css

siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

2 commentaires

anxest · 5 avril 2019 à 7 h 14 min

Je ne vais pas me plaindre de pouvoir consulter cet article en français, mais vous pourriez au moins indiquer que l’article est une traduction, et sa source :/ Cela dit, merci pour la traduction 🙂

    siddhy · 5 avril 2019 à 8 h 05 min

    Salut en effet c’est bien la traduction de l’article de Rachel Andrew sur Smashing Magazine. Article un peu long à traduire, j’ai publié un peu vite sans mettre la source… C’est corrigé, merci pour le rappel 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *