Tailwind CSS tutorial #4: Alignment - Justify Content
Tags: webdev, tailwindcss, beginners
Published: 2022-11-05 15:45:39

In this blog lets understand the concept of CSS alignment before getting into it, if you already know the basics of css flexbox that’s great, if you don't know much I can help you understand the flexbox concept below.

## Flexbox 
Flexbox is a method that allows us to layout items in one dimension horizontally or vertically before flexbox we had to use floats or tables for layouts and some ugly hacks to achieve the intended layouts but with the use of flex it's much simpler to achieve the same provided you understand all the properties of flexbox.

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

To start with a flexbox means a container usually invisible within which we have the items laid out the way we want container is the parent and these items are the children and these items can themselves be flex containers for smaller items within them and so on to start using flexbox the first thing to be done is to set the parent element to display flex in regular css it's display flex while in tailwind css the utility class name is just flex.

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

## Justify Content
Utilities for controlling how flex and grid items are positioned along a container's main axis.

**Format**

> `justify-{alignment}`


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

let's see each of this in action,

## **Start** 
Its the default value and justify start is  start of the main axis 

```html
<li class="flex w-full items-center justify-start px-4 py-2">
  <div class="flex w-full justify-start space-x-2 bg-yellow-200">
    <div class="rounded-md bg-red-500 px-3 py-2 text-white">1</div>
    <div class="rounded-md bg-green-500 px-3 py-2 text-white">2</div>
    <div class="rounded-md bg-blue-500 px-3 py-2 text-white">3</div>
  </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">justify-start</div>
  </div>
</li>

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

## **End**
It is used to align flex items at the end of the container.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="flex w-full justify-end space-x-2 bg-yellow-200">
    <div class="rounded-md bg-red-500 px-3 py-2 text-white">1</div>
    <div class="rounded-md bg-green-500 px-3 py-2 text-white">2</div>
    <div class="rounded-md bg-blue-500 px-3 py-2 text-white">3</div>
  </div>
  <div class="ml-5 w-1/3 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">justify-end</div>
  </div>
</li>


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

## **Center**
It aligns flex items at the center of the container.

```html
<li class="w-full flex items-center px-4 py-2">
  <div class="w-full justify-center flex space-x-2  bg-yellow-200">
    <div class="bg-red-500 text-white px-3 py-2 rounded-md">1</div>
    <div class="bg-green-500 text-white px-3 py-2 rounded-md">2</div>
    <div class="bg-blue-500 text-white px-3 py-2 rounded-md">3</div>
  </div>
  <div class="ml-5 text-right  w-1/3">
    <div
      class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">
      justify-center</div>
  </div>
</li>

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

## **Between**
The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.

```html
 <li class="w-full flex items-center px-4 py-2">
    <div class="w-full justify-between flex space-x-2  bg-yellow-200">
      <div class="bg-red-500 text-white px-3 py-2 rounded-md">1</div>
      <div class="bg-green-500 text-white px-3 py-2 rounded-md">2</div>
      <div class="bg-blue-500 text-white px-3 py-2 rounded-md">3</div>
    </div>
    <div class="ml-5 text-right  w-1/3">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">justify-between</div>
    </div>
  </li>

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

## **Around** 
The flex items are placed with equal spacing ie., before, between, and after, from each other & the corners.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="flex w-full justify-around space-x-2 bg-yellow-200">
    <div class="rounded-md bg-red-500 px-3 py-2 text-white">1</div>
    <div class="rounded-md bg-green-500 px-3 py-2 text-white">2</div>
    <div class="rounded-md bg-blue-500 px-3 py-2 text-white">3</div>
  </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">justify-around</div>
  </div>
</li>

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


## **Evenly**
The items are positioned with equal spacing between them but the spacing from corners differs.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="flex w-full justify-evenly space-x-2 bg-yellow-200">
    <div class="rounded-md bg-red-500 px-3 py-2 text-white">1</div>
    <div class="rounded-md bg-green-500 px-3 py-2 text-white">2</div>
    <div class="rounded-md bg-blue-500 px-3 py-2 text-white">3</div>
  </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">
      justify-evenly</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwowrdrfhm5fnt804s3u.png)

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

**Overall Output**

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



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


Thank you for reading :), 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!! 💛