# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/align-self.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "align-self";
export const description =
  "Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.";

<ApiTable
  rows={[
    ["self-auto", "align-self: auto;"],
    ["self-start", "align-self: flex-start;"],
    ["self-end", "align-self: flex-end;"],
    ["self-end-safe", "align-self: safe flex-end;"],
    ["self-center", "align-self: center;"],
    ["self-center-safe", "align-self: safe center;"],
    ["self-stretch", "align-self: stretch;"],
    ["self-baseline", "align-self: baseline;"],
    ["self-baseline-last", "align-self: last baseline;"],
  ]}
/>

## Examples

### Auto

Use the `self-auto` utility to align an item based on the value of the container's `align-items` property:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-auto rounded-lg bg-sky-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-auto] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-auto ...">02</div>
  <div>03</div>
</div>
```

</Figure>

### Start

Use the `self-start` utility to align an item to the start of the container's cross axis, despite the container's `align-items` value:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-start rounded-lg bg-pink-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-start] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-start ...">02</div>
  <div>03</div>
</div>
```

</Figure>

### Center

Use the `self-center` utility to align an item along the center of the container's cross axis, despite the container's `align-items` value:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-center rounded-lg bg-purple-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-center] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-center ...">02</div>
  <div>03</div>
</div>
```

</Figure>

### End

Use the `self-end` utility to align an item to the end of the container's cross axis, despite the container's `align-items` value:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-end rounded-lg bg-indigo-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-end] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-end ...">02</div>
  <div>03</div>
</div>
```

</Figure>

### Stretch

Use the `self-stretch` utility to stretch an item to fill the container's cross axis, despite the container's `align-items` value:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex h-24 w-full items-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          01
        </div>
        <div className="flex flex-1 items-center justify-center self-stretch rounded-lg bg-fuchsia-500 p-4">02</div>
        <div className="flex flex-1 items-center justify-center rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-stretch] -->
<div class="flex items-stretch ...">
  <div>01</div>
  <div class="self-stretch ...">02</div>
  <div>03</div>
</div>
```

</Figure>

### Baseline

Use the `self-baseline` utility to align an item such that its baseline aligns with the baseline of the flex container's cross axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 flex w-full gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-2 pb-6">01</div>
        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-8 pb-12">
          02
        </div>
        <div className="flex flex-1 items-center justify-center self-baseline rounded-lg bg-blue-500 pt-12 pb-4">
          03
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-baseline] -->
<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>
```

</Figure>

### Last baseline

Use the `self-baseline-last` utility to align an item along the container's cross axis such that its baseline aligns with the last baseline in the container:

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300">
      <div className="grid grid-cols-[auto_1fr_auto] gap-x-4 px-4 py-6">
        <img
          className="size-[2rem] rounded-full"
          src="https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80"
          alt=""
        />
        <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Spencer Sharp</div>
        <p className="self-baseline-last text-sm sm:col-start-2">
          Working on the future of astronaut recruitment at Space Recruit.
        </p>
        <a
          href="#"
          className="self-baseline-last font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
        >
          spacerecruit.com
        </a>
      </div>
      <div className="grid grid-cols-[auto_1fr_auto] gap-x-4 px-4 py-6">
        <img
          className="size-[2rem] rounded-full"
          src="https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt=""
        />
        <div className="font-semibold text-gray-900 sm:col-start-2 dark:text-white">Alex Reed</div>
        <p className="self-baseline-last text-sm sm:col-start-2">A multidisciplinary designer.</p>
        <a
          href="#"
          className="self-baseline-last font-mono text-xs font-medium text-gray-400 underline hover:text-blue-500 dark:text-gray-500"
        >
          alex-reed.com
        </a>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:self-baseline-last] -->
<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>
```

</Figure>

This is useful for ensuring that text items align with each other, even if they have different heights.

### Responsive design

<ResponsiveDesign property="align-self" defaultClass="self-auto" featuredClass="self-end" />