align-self

Ejemplos

Auto

Usa la utilidad self-auto para alinear un ítem basándose en el valor de la propiedad align-items del contenedor:

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-auto ...">02</div>
  <div>03</div>
</div>

Start

Usa la utilidad self-start para alinear un ítem al inicio del eje transversal del contenedor, a pesar del valor align-items del contenedor:

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-start ...">02</div>
  <div>03</div>
</div>

Center

Usa la utilidad self-center para alinear un ítem a lo largo del centro del eje transversal del contenedor, a pesar del valor align-items del contenedor:

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-center ...">02</div>
  <div>03</div>
</div>

End

Usa la utilidad self-end para alinear un ítem al final del eje transversal del contenedor, a pesar del valor align-items del contenedor:

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-end ...">02</div>
  <div>03</div>
</div>

Stretch

Usa la utilidad self-stretch para estirar un ítem para que llene el eje transversal del contenedor, a pesar del valor align-items del contenedor:

<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-stretch ...">02</div>
  <div>03</div>
</div>

Baseline

Usa la utilidad self-baseline para alinear un ítem de modo que su línea base se alinee con la línea base del eje transversal del contenedor flex:

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

Last baseline

Usa la utilidad self-baseline-last para alinear un ítem a lo largo del eje transversal del contenedor de modo que su línea base se alinee 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]">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p class="self-baseline-last">Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p class="self-baseline-last">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-self con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="self-auto md:self-end ...">
  <!-- ... -->
</div>

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