Tailwind CSS tutorial #7: Align Content
Tags: webdev, tailwindcss, tutorial
Published: 2022-11-09 08:37:28

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

## Align Content
The flex-wrap attribute's behaviour is altered by the align-content property. Flex lines are aligned.
 It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox.

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


| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[Center](#center) | `content-center` | `align-content: center;`|
|[Start](#start) | `content-start` | `	align-content: flex-start;`|
|[End](#end) | `content-end` | `align-content: flex-end;`|
|[Between](#between) | `content-between` | `	align-content: space-between;`|
|[Around](#around) | `content-around` | `		align-content: space-around;`|
|[Evenly](#evenly) | `content-evenly` | `	align-content: space-evenly;`|

let's see each of this in action,
## **Center** 
This class is used to position lines in the flex container's center.

```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 content-center gap-1 bg-purple-100">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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">content-center</div>
  </div>
</li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlm316x36x1u5uexluon.png)


## **Start** 
 This class is used to place lines at the beginning of the flex container.
```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 content-start gap-1 bg-purple-100">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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">content-start</div>
  </div>
</li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw255ow7jk1u41quhpt0.png)

## **End**
To position lines at the end of the flex container, use the content-end class.

```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 content-end gap-1 bg-purple-100">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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">content-end</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzl7txgp561vg9f2kfh3.png)

## **Between**
With the help of this class, rows can be placed in a container so that each line has the equal amount of space.

```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 content-between gap-1 bg-purple-100">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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">content-between</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hup0knpics2uynovdku.png)

## **Around**
By using this class, rows are distributed equally within a container so that each line has a same amount of surrounding space.
```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 content-around gap-1 bg-purple-100">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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">content-around</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49w1zvptrqhh52qcx65x.png)

## **Evenly**
This class is used to arrange rows in a container so that there is an equal amount of space around each item, while also accounting for the doubling of space between each item that you would see if you used the content-around class.
```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 content-evenly gap-1 bg-purple-100">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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">content-evenly</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmpucb7bofrdt7tobk08.png)

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

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

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

Thank you for reading :), To learn more, check out my blogs on [Justify-Content](https://dev.to/shubhicodes/tailwind-css-tutorial-4-alignment-justify-content-3m20), [Responsive Navbar](https://dev.to/shubhicodes/tailwind-css-tutorial-3-responsive-navbar-47ip) and [Justify-Item](https://dev.to/shubhicodes/tailwind-css-tutorial-5-alignment-justify-items-4mci).
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!! 💛