Alignement vertical et alignement horizontal du vent arrière

personne github

alignement vertical du centre

Dans Tailwind CSS, flexet items-centersont des classes utilitaires utilisées pour la mise en page et l'alignement.

• flex: Cette classe définit les displayattributs de l'élément sur flex. Cela vous permet d'utiliser le modèle de présentation Flexbox pour disposer et aligner les éléments enfants.

• items-center: Cette classe est utilisée pour centrer verticalement les éléments enfants dans un conteneur Flexbox. Il définit les align-itemspropriétés CSS sur center.

Lorsque vous combinez ces deux classes sur un élément, l'élément devient un conteneur Flexbox et tous ses enfants directs sont centrés et alignés verticalement.

Exemple:

<div class="flex items-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Dans cet exemple, <div>l'élément est un conteneur Flexbox et ses trois <div>éléments enfants sont alignés verticalement et centrés.

Cette combinaison est utile lors de la création de dispositions horizontales, en particulier lorsque vous souhaitez centrer verticalement les éléments enfants dans un conteneur.

Alignement horizontal

Dans Tailwind CSS, l'alignement horizontal est généralement justify-*implémenté à l'aide de classes qui définissent justify-contentles propriétés CSS. Voici quelques justify-*classes couramment utilisées :

• justify-start: Aligne les éléments enfants au début du conteneur (comportement par défaut).
• justify-center: L'élément enfant est centré horizontalement dans le conteneur.
• justify-end: Aligne les éléments enfants à la fin du conteneur.
• justify-between: Les éléments enfants sont répartis uniformément dans le conteneur, avec le premier élément au début et le dernier élément à la fin.
• justify-around: Les éléments enfants sont répartis uniformément dans le conteneur, avec un espace égal des deux côtés.
• justify-evenly: Les éléments enfants sont répartis uniformément dans le conteneur et tout l'espace (y compris les deux côtés) est égal.

Ces classes sont généralement flexutilisées avec des classes pour créer un conteneur Flexbox.

Exemple:

<!-- 子元素在容器中水平居中 -->
<div class="flex justify-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- 子元素平均分布在容器中 -->
<div class="flex justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Dans le premier exemple, tous les éléments enfants seront centrés horizontalement dans le conteneur. Dans le deuxième exemple, le premier élément enfant sera au début du conteneur, le dernier élément enfant sera à la fin du conteneur et les éléments enfants restants seront répartis uniformément entre eux.