Tailwind CSS tutorial #9: Align Self
Published: 2022-11-11 11:13:04

In the article, we will go into detail on how to use `align-self`.

## Align Self
Tools for adjusting a single flex or grid item's position in relation to its container's cross axis.

**Format**
> `self-{alignment}`

| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[Auto](#auto) | `self-auto` | `		align-self: auto;`|
|[Start](#start) | `self-start` | `	align-self: flex-start;`|
|[End](#end) | `self-end` | `align-self: flex-end;`|
|[Center](#center) | `self-center` | `align-self: center;`|
|[Stretch](#stretch) | `self-stretch	` | `			align-self: stretch;`|

let's see each of this in action,
## **Auto** 
Use self-auto to align an item based on the value of the container’s align-items property:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-auto rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-auto</div>
  </div>
</li>

```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyhfwn4gm8n0wk7iaujk.png)

## **Start** 
Use self-start to align an item to the start of the container’s cross axis, despite the container’s align-items value:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-start rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-start</div>
  </div>
</li>

```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjy4jv9pganawd7rhoal.png)

## **End**
Use self-end to align an item to the end of the container’s cross axis, despite the container’s align-items value:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-end rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-end</div>
  </div>
</li>

```
**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l7fz2n3xllqb3j649qp.png)

## **Center** 
Use self-center to align an item along the center of the container’s cross axis, despite the container’s align-items value:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-center rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-center</div>
  </div>
</li>

```
**Output:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxotkzhqi0ar3engzp98.png)

## **Stretch**
Use self-stretch to stretch an item to fill the container’s cross axis, despite the container’s align-items value:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-stretch rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-stretch</div>
  </div>
</li>

```
**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esihv5k226g8douwzrxx.png)


**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Align-self.html)link.

**Overall Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9rbaguxx4pcsvuvh362.png)


**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Justify Self](https://dev.to/shubhicodes/tailwind-css-tutorial-6-alignment-justify-self-1db4),  [Align Content](https://dev.to/shubhicodes/tailwind-css-tutorial-7-align-content-48k8) and [Align Items](https://dev.to/shubhicodes/tailwind-css-tutorial-7-align-content-48k8).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛