Tout ce que vous devez savoir sur l'alignement dans Flexbox

Dans cet article, nous examinons les propriétés d'alignement de Flexbox tout en découvrant quelques règles de base permettant de se rappeler comment l'alignement sur l'axe principal et l'axe transversal.

Dans le premier article de cette série j'ai expliqué ce qui se passe lorsque vous déclarez display: flex sur un élément. Cette fois, nous examinerons les propriétés d'alignement et leur fonctionnement avec Flexbox. Si vous avez déjà été dérouté quand aligner et quand justifier, j'espère que cet article rendra les choses plus claires!

Historique de l'alignement Flexbox

Pour l'historique complet de la mise en page CSS, être capable d'aligner correctement les deux les axes semblaient être le problème le plus difficile dans la conception de sites Web. Ainsi, la capacité d'aligner correctement les éléments et les groupes d'éléments était pour beaucoup d'entre nous la chose la plus excitante à propos de Flexbox lorsqu'elle a commencé à apparaître dans les navigateurs. L'alignement est devenu aussi simple que deux lignes de CSS:

Voir le stylo Smashing Flexbox Series 2: centrer un objet de Rachel Andrew ( @rachelandrew ) sur CodePen .

Les propriétés d'alignement que vous pourriez considérer comme les propriétés d'alignement de la boîte flexible sont maintenant entièrement définies dans la spécification Box Alignment Specification . Cette spécification décrit comment l'alignement fonctionne dans les différents contextes de mise en page. Cela signifie que nous pouvons utiliser les mêmes propriétés d'alignement dans CSS Grid que nous utilisons dans Flexbox – et dans d'autres contextes de présentation à l'avenir. Par conséquent, toute nouvelle fonctionnalité d'alignement pour flexbox sera détaillée dans la spécification d'alignement de boîte et non dans un niveau futur de Flexbox.

Lecture recommandée : Meilleures pratiques avec la disposition de grille CSS

The Properties

Beaucoup de gens me disent qu'ils ont du mal à se rappeler d'utiliser ou non des propriétés commençant par align- avec justifier- en boîte souple. La chose à retenir est que:

• justification- effectue l'alignement de l'axe principal. L'alignement dans le même sens que votre flex-direction
• align- effectue un alignement transversal. Alignement dans la direction définie par flex-direction .

La réflexion en termes d'axe principal et d'axe transversal, plutôt qu'horizontale et verticale, aide vraiment ici. Peu importe la direction physique de l'axe.

Alignement de l'axe principal avec Justifie-Content

Nous commencerons par l'alignement de l'axe principal. Sur l'axe principal, nous alignons en utilisant la propriété zones-justifie . Cette propriété traite de tous nos articles flexibles en tant que groupe et contrôle la répartition de l'espace entre eux.

La valeur initiale de d'entrer dans le contenu est flex-start . C'est pourquoi, lorsque vous déclarez display: flex tous vos éléments flexibles sont alignés sur le début de la ligne flexible. Si vous avez une ligne de flex-direction de et êtes dans une langue de gauche à droite telle que l'anglais, les éléments commenceront à gauche.

Notez que la propriété Justifiant-Contenu ne peut faire que quelque chose s'il y a de la place disponible pour la distribution . Par conséquent, si vous avez un ensemble d'éléments flex qui occupent tout l'espace sur l'axe principal, l'utilisation de justifie-contenu ne changera rien.

Si nous donnons justification-content à la valeur de flex-end alors tous les éléments seront déplacés à la fin de la ligne. L'espace disponible est maintenant placé au début.

Nous pouvons faire d'autres choses avec cet espace. Nous pourrions demander qu'il soit distribué entre nos articles flexibles, en utilisant justification-contenu: espace-entre . Dans ce cas, le premier et le dernier élément seront alignés avec les extrémités du conteneur et tout l’espace partagé également entre les objets.

Nous pouvons demander que l'espace à distribuer autour de nos éléments flexibles, en utilisant justifie le contenu: space-around . Dans ce cas, l’espace disponible est partagé et placé de chaque côté de l’élément.

Une nouvelle valeur de Justifiant-Contenu peut être trouvée dans la spécification Box Alignment; il n'apparaît pas dans la spécification Flexbox. Cette valeur est égale à dans l'espace . Dans ce cas, les éléments seront distribués uniformément dans le conteneur et l'espace supplémentaire sera partagé entre les deux côtés des éléments.

Vous pouvez jouer avec toutes les valeurs de la démo:

Voir le stylo Smashing Flexbox Series 2: justifier-contenu avec flex-direction: rangée de Rachel Andrew ( @rachelandrew ) sur CodePen .

Ces valeurs fonctionnent de la même manière si votre flex-direction est la colonne . Vous n'avez peut-être pas assez d'espace pour distribuer dans une colonne, sauf si vous ajoutez une hauteur ou une taille de bloc au conteneur flexible comme dans cette prochaine démonstration.

Voir le stylo Smashing Flexbox Series 2: justifiez le contenu avec flex -direction: colonne de Rachel Andrew ( @rachelandrew ) sur CodePen .

Alignement de l'axe des axes avec align-content

Si vous avez ajouté flex-wrap: enveloppez dans votre conteneur flexible et disposez de plusieurs lignes flexibles, puis vous pouvez utiliser align-content pour aligner vos lignes flexibles sur l'axe transversal. Cependant, cela nécessitera que vous disposiez d'un espace supplémentaire sur l'axe transversal. Dans la démo ci-dessous, mon axe transversal fonctionne dans la direction du bloc en tant que colonne et j'ai défini la hauteur du conteneur flexible sur 60vh . Comme il est plus que nécessaire pour afficher mes articles flexibles, j'ai de l'espace libre verticalement dans le conteneur.

Je peux alors utiliser align-content avec l'une des valeurs suivantes:

Voir le stylo Smashing Flexbox Series 2: aligner-contenu avec flex-direction: rangée de Rachel Andrew ( @rachelandrew ) le CodePen .

Si mon flex -direction était colonne puis align-content fonctionnerait comme dans l'exemple suivant.

Voir le stylo Smashing Flexbox Series 2: align-contenu avec flex -direction: colonne de Rachel Andrew ( @rachelandrew ) sur CodePen .

Comme avec Justification-Content nous travaillons avec les lignes en groupe et en distribuant l'espace disponible.

La place-content Sténographie

Dans l'alignement de boîtes, on trouve la sténographie place-content ; L'utilisation de cette propriété signifie que vous pouvez définir Justifiant-Contenu et align-content . La première valeur est pour align-content la deuxième pour dans le contenu justifié . Si vous ne définissez qu'une valeur, les deux valeurs sont définies sur cette valeur, par conséquent:

 .container {
    place-content: espace entre les tronçons;
} 

Identique à:

 .container {
    align-content: espace-entre;
    justification-content: stretch;
} 

Si nous avons utilisé:

 .container {
    place-content: space-between;
} 

Ce serait le même que:

 .container {
    align-content: espace-entre;
    Justifie le contenu: espace-entre;
} 

Alignement des axes croisés avec align-items

Nous savons maintenant que nous pouvons aligner notre ensemble d'éléments flexibles ou nos lignes flexibles en tant que groupe. Cependant, nous pourrions souhaiter aligner nos éléments d'une autre manière, à savoir aligner les éléments les uns par rapport aux autres sur l'axe transversal. Votre conteneur flexible a une hauteur. Cette hauteur peut être définie par la hauteur de l'élément le plus grand comme dans cette image.

Il pourrait plutôt être défini en ajoutant une hauteur au conteneur flexible:

La raison pour laquelle les items flex semblent s'étendre à la taille de l'élément le plus grand est que la valeur initiale de align-items est stretch . Les éléments s'étendent sur l'accès croisé pour devenir la taille du conteneur flexible dans cette direction.

Notez que lorsque align-items est concerné, si vous avez un conteneur flexible multiligne, chaque ligne agit comme un nouveau conteneur flexible. L'élément le plus grand de cette ligne définira la taille de tous les éléments de cette ligne.

Outre la valeur initiale de l'étirement, vous pouvez donner align-items à flex-start auquel cas ils s'alignent sur le début du conteneur et ne s'étendent plus à la hauteur.

La valeur flex-end les déplace à la fin du conteneur sur l'axe transversal.

Si vous utilisez une valeur de centre les éléments sont tous centrés les uns contre les autres:

Nous pouvons également effectuer un alignement de base. Cela garantit que les lignes de base du texte s'alignent, plutôt que d'aligner les zones autour du contenu.

Vous pouvez essayer ces valeurs dans la démo:

Voir le stylo Smashing Flexbox Series 2: align-items de Rachel Andrew ( @rachelandrew ) sur CodePen .

Alignement individuel avec align-self

La propriété align-items signifie que vous pouvez définir l'alignement de tous les éléments en une seule fois. En réalité, cela définit toutes les valeurs de align-self sur les éléments flex individuels en tant que groupe. Vous pouvez également utiliser la propriété align-self sur n'importe quel élément flexible pour l'aligner à l'intérieur de la ligne flexible et contre les autres éléments flex.

Dans l'exemple suivant, j'ai utilisé align- éléments sur le conteneur pour définir l'alignement du groupe sur centre mais également align-self sur le premier et le dernier élément pour modifier leur valeur d'alignement.

Voir le stylo Smashing Flexbox Series 2: align-self par Rachel Andrew ( @rachelandrew ) sur CodePen .

Pourquoi aucun ne justifie-t-il -self ?

Une question courante est de savoir pourquoi il n'est pas possible d'aligner un élément ou un groupe d'éléments sur l'axe principal. Pourquoi n'y a-t-il pas de propriété -self pour l'alignement des axes principaux dans Flexbox? Si vous pensez que justifie le contenu et align-content comme concernant la distribution de l'espace, la raison pour laquelle ils ne sont pas auto-alignés devient plus évidente. Nous traitons les éléments flexibles en tant que groupe et en répartissant l'espace disponible d'une manière ou d'une autre – au début ou à la fin du groupe ou entre les éléments.

Si vous pouviez également réfléchir à la manière dont justifie- content et align-content fonctionnent en CSS Grid Layout. Dans Grid, ces propriétés sont utilisées pour répartir l'espace disponible dans le conteneur de grille entre les pistes de grille . Encore une fois, nous prenons les pistes en groupe et ces propriétés nous permettent de répartir tout espace supplémentaire entre elles. Comme nous agissons sur un groupe à la fois dans Grid et Flexbox, nous ne pouvons pas cibler un élément seul et faire quelque chose de différent. Cependant, il existe un moyen d'obtenir le type de disposition que vous demandez lorsque vous demandez une propriété auto sur l'axe principal, à savoir utiliser des marges automatiques.

Utilisation des marges automatiques sur The Main Axis

Si vous avez déjà centré un bloc dans CSS (comme l'encapsuleur du contenu de votre page principale en définissant une marge à gauche et à droite de auto ), vous avez déjà une certaine expérience de les marges automatiques se comportent. Une marge définie sur auto essaiera de devenir aussi grande que possible dans la direction dans laquelle elle a été définie. Dans le cas de l'utilisation de marges pour centrer un bloc, nous définissons les deux gauche et droite sur auto; ils essaient chacun de prendre autant d'espace que possible et poussent ainsi notre bloc au centre.

Les marges automatiques fonctionnent très bien dans Flexbox pour aligner des éléments simples ou des groupes d'éléments sur l'axe principal. Dans l'exemple suivant, j'atteins un modèle de conception commun. J'ai une barre de navigation en utilisant Flexbox, les éléments sont affichés sous forme de ligne et utilisent la valeur initiale de Jenable-content: start . Je voudrais que l'élément final soit affiché séparé des autres à la fin de la ligne de flexion – en supposant qu'il y ait suffisamment d'espace sur la ligne pour le faire.

Je cible cet objet et lui donne une marge de gauche. Cela signifie que la marge essaie d'obtenir autant d'espace que possible à gauche de l'élément, ce qui signifie que l'objet est complètement repoussé vers la droite.

Voir le stylo Smashing Flexbox Series 2: alignement avec marges automatiques par Rachel Andrew ( @rachelandrew ) sur CodePen .

Si vous utilisez des marges automatiques sur l'axe principal, alors justifie-contenu cessera d'avoir un effet, car les marges automatiques auront occupé tout l'espace qui aurait été attribué à l'aide de Justifiant-Contenu .

Alignement de secours

Chaque méthode d'alignement détaille un alignement de secours , c'est ce qui se passera si l'alignement que vous avez demandé ne peut être réalisé. Par exemple, si vous ne disposez que d'un élément dans un conteneur Flex et que vous demandez Justificatif: espace-entre que devrait-il se passer? La réponse est que l'alignement de repli de flex-start est utilisé et que votre élément unique sera aligné sur le début du conteneur flexible. Dans le cas de Jablit-content: space-around un alignement de repli du centre est utilisé.

Dans la spécification actuelle, vous ne pouvez pas modifier l'alignement de secours, Donc, si vous préférez que le repli pour l'espace entre et centre plutôt que flex-start il n'y a pas moyen de le faire. Il y a dans la spécification qui indique que les niveaux futurs pourraient permettre cela.

Alignement sûr et dangereux

Un ajout plus récent à la spécification d'alignement de boîtes est le concept d'alignement sûr et dangereux les mots-clés safe et unsafe .

Avec le code suivant, le dernier élément est trop large pour le conteneur et avec un alignement dangereux et le conteneur Flex sur le côté gauche de la page, l’élément est tronqué car le débordement se situe en dehors de la limite de la page.

 .container {
    affichage: flex;
    flex-direction: colonne;
    largeur: 100px;
    align-items: centre dangereux;
}

.item: dernier enfant {
    largeur: 200px;
} 

Un alignement sécurisé empêcherait la perte de données en déplaçant le dépassement vers l'autre côté.

 .container {
    affichage: flex;
    flex-direction: colonne;
    largeur: 100px;
    align-items: centre sûr;
}

.item: dernier enfant {
    largeur: 200px;
} 

Ces mots-clés prennent actuellement en charge le navigateur, mais ils démontrent le contrôle supplémentaire apporté à Flexbox via la spécification Box Alignment.

Voir le stylo Smashing Flexbox Series 2: alignement sûr ou non sécurisé par Rachel Andrew ( @rachelandrew ) sur CodePen .

In Summary

Les propriétés d'alignement ont commencé en tant que liste dans Flexbox, mais sont maintenant dans leur propre spécification et s'appliquent à autres contextes de mise en page. Quelques faits clés vous aideront à vous rappeler comment les utiliser dans Flexbox:

• justifier- l'axe principal et aligner l'axe transversal;
• Utiliser align- content et Justifie-contenu vous avez besoin de plus d'espace pour jouer;
• Les propriétés de align-content et Justifie-content en groupe, partager l'espace. Par conséquent, vous ne pouvez pas cibler un élément individuel et il n'y a donc pas d'alignement -self pour ces propriétés;
• Si vous voulez aligner un élément ou diviser un groupe sur l'axe principal, utilisez marges automatiques pour le faire;
• La propriété align-items définit toutes les valeurs align-self en tant que groupe. Utilisez align-self sur l'enfant flexible pour définir la valeur d'un élément individuel.

(il)