Comment aligner les choses dans CSS

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

Dans cet article, je vais examiner les différentes méthodes d'alignement. Au lieu de fournir un guide complet à chacun d’eux, j’expliquerai quelques-uns des points de blocage des gens et pointerai vers des références plus complètes pour les propriétés et les valeurs. Comme avec beaucoup de CSS, vous pouvez aller très loin en en comprenant les choses fondamentales sur le comportement des méthodes, puis vous avez besoin d'un endroit où aller pour rechercher les détails les plus fins en termes de réalisation de la mise en page précise. que vous voulez.

Alignement de texte et d'é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 souhaitez que votre texte soit centré ou justifié. Cependant, vous pouvez parfois souhaiter aligner les éléments de cette zone avec d'autres éléments, par exemple si une icône est affichée à côté de texte ou de texte de tailles différentes.

Dans l'exemple ci-dessous, un texte avec une image en ligne plus grande. J'utilise vertical-align: middle sur l'image pour aligner le texte sur le centre de l'image.

La line-height Property And Alignment

N'oubliez pas que la La propriété line-height modifiera la taille de la ligne et vous permettra donc de modifier votre alignement. L'exemple suivant utilise une valeur de hauteur de ligne large de 150px et j'ai aligné l'image sur top . L'image est alignée sur le haut de la zone de ligne et non sur le haut du texte. Supprimez cette hauteur de ligne ou rendez-la inférieure à la taille de l'image. L'image et le texte s'aligneront en haut du texte. 19659005] Il s'avère que line-height et en effet, la taille du texte est assez compliquée, et je ne vais pas m'attaquer à ce trou de lapin dans cet article. Si vous essayez d'aligner avec précision les éléments en ligne et que vous voulez vraiment comprendre ce qui se passe, je vous recommande de lire « CSS Deep Dive: Font Metrics, line-height et vertical-align [19659012]. ”

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

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

La propriété vertical-align n'a aucun effet sur les éléments flex ou grid, et donc si elle est utilisée comme partie d’une stratégie de repli, cessera d’appliquer à la minute où l’élément parent est transformé en une grille ou un conteneur flex. Par exemple, dans le stylo suivant, j'ai un ensemble d'éléments disposés avec l'affichage : inline-block ce qui signifie que je peux aligner les éléments même si le navigateur ne dispose pas de Flexbox: [19659016] Voir le stylo inline-block et vertical-align de Rachel Andrew .

Dans ce prochain stylo, j'ai traité le alignement-block comme une solution de rechange pour la mise en page Flex. Les propriétés d'alignement ne s'appliquent plus, et je peux ajouter align-items pour aligner les éléments dans Flexbox. Vous pouvez constater que la méthode Flexbox est en jeu, car l'écart entre les éléments que vous obtiendrez en utilisant l'affichage : inline-block a disparu.

Voir le stylo flexion de repli du bloc en ligne par Rachel Andrew .

Le fait que vertical-align fonctionne sur des cellules de tableau est la raison pour laquelle le truc pour centrer verticalement un élément à l'aide de : table-cell fonctionne .

Maintenant que nous disposons de meilleurs moyens pour aligner les boîtes en CSS (comme nous le verrons dans la section suivante), nous n'avons pas besoin d'utiliser le vertical-align et propriétés text-align situées dans des emplacements autres que les éléments en ligne et les éléments de texte pour lesquels elles ont été conçues. Cependant, leur utilisation dans ces formats de texte et en ligne reste tout à fait valable. N'oubliez donc pas que si vous essayez d'aligner quelque chose en ligne, ce sont ces propriétés et non celles d'Alignement de boîte que vous devez atteindre.

Alignement de boîte

La spécification d'alignement de boîtes explique comment aligner tout le reste. La spécification détaille les propriétés d’alignement suivantes:

• justification-contenu
• align-contenu
• justification-auto
• align-auto
• justification-items
• align-items

Vous pourriez déjà Pensez à ces propriétés comme faisant partie de la spécification Flexbox, ou peut-être de la grille. L’historique des propriétés est qu’elles sont issues de Flexbox et existent toujours dans la spécification de niveau 1; Cependant, ils ont été déplacés dans leurs propres spécifications quand il est devenu évident qu'ils étaient plus généralement utiles. Nous les utilisons maintenant également dans Grid Layout, et elles sont spécifiées pour d'autres méthodes de disposition, même si la prise en charge actuelle du navigateur signifie que vous ne pourrez pas les utiliser pour l'instant. cet alignement vertical est la partie la plus difficile de CSS, vous pouvez leur dire ceci (qui correspond même à un tweet):

 .container {
  affichage: flex;
  align-items: centre;
  justifier-contenu: centre;
}

À 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 auront été implémentées pour la disposition en blocs. Cependant, pour le moment, centrez un conteneur Flex sur le parent de la chose que vous souhaitez centrer est le moyen d'obtenir un alignement horizontal et vertical.

Les deux types d'alignement

Lorsque vous alignez des éléments flex et grid, vous avez deux possibilités. éléments à aligner:

1. Vous disposez de l'espace disponible dans la grille ou dans le conteneur flexible (une fois que les éléments ou les pistes ont été disposés).
2. Vous avez également l'élément lui-même dans la zone de grille où vous l'avez placé ou sur lequel il a été placé. l'axe transversal à l'intérieur du conteneur flex.

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. Ceux qui traitent de la distribution d'espace disponible et ceux qui alignent l'élément lui-même.

Gestion des espaces disponibles: align-content et justification-contenu

Les propriétés qui fin dans - le contenu concerne la répartition de l'espace. Ainsi, lorsque vous choisissez d'utiliser align-content ou worth-content vous distribuez de l'espace disponible entre les tracés de la grille ou flex. articles. Ils ne changent pas la taille des éléments flex ou grid eux-mêmes; ils les déplacent car ils changent là où l'espace disponible est utilisé.

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

Voir la plume justifier-contenu et aligner-contenu de Rachel Andrew .

Déplacement d'objets autour: justification-auto align-self justification-items et align-items

Nous avons ensuite align-self et justification-self appliqués à un individu articles flexibles ou en grille; vous pouvez également utiliser align-items et justifier-items sur le conteneur pour définir toutes les propriétés en même temps. Ces propriétés traitent de l'élément de flex ou de grille réel, c'est-à-dire que vous déplacez le contenu dans la zone de grille ou la ligne de flex.

• Grid Layout
Vous obtenez les deux propriétés, car vous pouvez déplacer l'élément sur le bloc et l'axe en ligne car nous avons une zone de grille définie dans laquelle il se trouve.
• Flex Layout
Vous ne pouvez vous aligner que sur l'axe transversal car l'axe principal est contrôlé uniquement par la distribution spatiale. Ainsi, si vos éléments sont rangés, vous pouvez utiliser align-self pour les déplacer de haut en bas à l'intérieur de la ligne de flexion, en les alignant les uns contre les autres.

Dans mon exemple ci-dessous, j'ai un 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 Flexbox de Firefox, vous pouvez voir la taille du conteneur flex et la façon dont 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 dans leur zone de grille. Une fois encore, l’Inspecteur de grille de Firefox DevTools sera utile pour jouer avec alignement. Avec les lignes de la grille superposées, vous pouvez voir la zone à l'intérieur de laquelle le contenu est déplacé:

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

Voir le stylo justification-auto, align-auto, justification-éléments, align-éléments de Rachel Andrew .

Confuse By aligner et justifier

L’un des problèmes cités avec les personnes se souvenant des propriétés d’alignement dans Grid et Flexbox est le suivant: personne ne peut se rappeler s'il faut aligner ou justifier.

Pour la disposition de la grille, vous devez savoir si vous alignez dans la direction du bloc ou en ligne. La direction de bloc correspond aux blocs de direction disposés sur votre page (en mode écriture), c'est-à-dire pour l'anglais qui est verticalement. La direction Inline est la direction dans laquelle les phrases sont exécutées (donc pour l'anglais qui est placé de gauche à droite horizontalement).

Pour aligner les éléments dans la direction du bloc, vous utiliserez les propriétés commençant par align- . Vous utilisez align-content pour répartir l'espace entre les tracés de grille, s'il y a de l'espace libre dans le conteneur de grille, et align-items ou align-self pour vous déplacer. un élément situé à l'intérieur de la zone de grille dans laquelle il a été placé.

L'exemple ci-dessous présente deux dispositions de grille. L'un a le mode d'écriture: horizontal-tb (qui est la valeur par défaut pour l'anglais) et l'autre le 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 des blocs dans les deux modes.

Voir le stylo Alignement des axes des blocs de la grille par Rachel Andrew .

Pour aligner les éléments dans le sens de la ligne, utilisez les propriétés qui commencent par justifier- . Utilisez justification-contenu pour répartir l'espace entre les tracés de la grille et justification-éléments ou justification-soi pour aligner des éléments à l'intérieur de leur zone de quadrillage. 19659005] Une fois encore, j’ai deux exemples d’agencement de grille qui vous permettent de voir que l’inline est toujours en ligne, quel que soit le mode d’écriture utilisé.

Voir le stylo Alignement alignement de grille de Rachel Andrew .

Flexbox est un peu plus compliqué à cause du fait que nous avons un axe principal qui peut être changé en colonne row ou . Alors, commençons par penser à cet axe principal. Il est défini avec la propriété flex-direction . La valeur initiale (ou par défaut) de cette propriété est row ce qui permet de placer les éléments flexibles sous la forme d'une ligne dans le mode d'écriture actuellement utilisé. C'est pourquoi, lorsque vous travaillez en anglais, vous vous retrouvez avec des éléments posés. horizontalement lorsque nous créons un conteneur flexible. Vous pouvez ensuite changer l'axe principal en direction flex: colonne et les éléments seront disposés en colonne, ce qui signifie qu'ils sont disposés dans la direction du bloc pour ce mode d'écriture.

Pour ce faire, le facteur le plus important dans Flexbox est la question suivante: «Quel axe est mon axe principal?». Une fois que vous le savez, vous utilisez simplement justification-contenu pour l'alignement (sur votre axe principal). . Peu importe si votre axe principal est une ligne ou une colonne. Vous contrôlez l'espace entre les éléments flexibles avec justification-contenu .

Voir le stylo justfy-content dans Flexbox de Rachel Andrew .

Sur l'axe transversal, vous pouvez utiliser align-items qui alignera les éléments à l'intérieur du conteneur flexible ou la ligne flexible dans un conteneur flexible multiligne. Si vous disposez d'un conteneur multiligne utilisant de manière flexible: wrap et disposent d'un espace dans ce conteneur, vous pouvez utiliser align-content pour répartir l'espace sur l'axe transversal.

Dans l'exemple ci-dessous, nous utilisons à la fois un conteneur Flex affiché sous forme de ligne et de colonne:

Voir le stylo Alignement de l'axe croisé dans Flexbox de Rachel Andrew ].

Quand justifier-contenu ou aligner-contenu ne fonctionne pas

Le justifier-contenu et aligner le contenu ] propriétés dans Grid et Flexbox concernent environ distribuant de l’espace supplémentaire . Donc, la chose à vérifier est que vous avez un espace supplémentaire.

Voici un exemple Flex: j'ai défini flex-direction: row et j'ai trois éléments. Ils ne prennent pas toute la place dans le conteneur flexible, j'ai donc de la place sur l'axe principal. La valeur initiale de justification-contenu est flex-start etc. mes articles sont tous alignés au début et l'espace supplémentaire est à la fin. J'utilise l'inspecteur Flex de Firefox pour mettre l'espace en surbrillance.