align-items

Ejemplos

Stretch

Usa la utilidad items-stretch para estirar los ítems para que llenen el eje transversal del contenedor:

<div class="flex items-stretch ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

Start

Usa la utilidad items-start para alinear los ítems al inicio del eje transversal del contenedor:

<div class="flex items-start ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

Center

Usa la utilidad items-center para alinear los ítems a lo largo del centro del eje transversal del contenedor:

<div class="flex items-center ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

End

Usa la utilidad items-end para alinear los ítems al final del eje transversal del contenedor:

<div class="flex items-end ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

Baseline

Usa la utilidad items-baseline para alinear los ítems a lo largo del eje transversal del contenedor de modo que todas sus líneas base se alineen:

<div class="flex items-baseline ...">
  <div class="pt-2 pb-6">01</div>
  <div class="pt-8 pb-12">02</div>
  <div class="pt-12 pb-4">03</div>
</div>

Last baseline

Usa la utilidad items-baseline-last para alinear los ítems a lo largo del eje transversal del contenedor de modo que todas sus líneas base se alineen con la última línea base del contenedor:

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com

Alex Reed

A multidisciplinary designer.

alex-reed.com

<div class="grid grid-cols-[1fr_auto] items-baseline-last">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p>spacerecruit.com</p>
</div>

Esto es útil para asegurar que los ítems de texto se alineen entre sí, incluso si tienen diferentes alturas.

Responsive design

Prefija una utilidad align-items con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="flex items-stretch md:items-center ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.