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.
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.
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 | justify-start |
justify-content: flex-start; |
| End | justify-end |
justify-content: flex-end; |
| Center | justify-center |
justify-content: flex-center; |
| Between | justify-between |
justify-content: flex-between; |
| Around | justify-around |
justify-content: flex-around; |
| 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
<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:
End
It is used to align flex items at the end of the container.
<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
Center
It aligns flex items at the center of the container.
<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
Between
The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.
<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
Around
The flex items are placed with equal spacing ie., before, between, and after, from each other & the corners.
<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
Evenly
The items are positioned with equal spacing between them but the spacing from corners differs.
<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
Full code:
The overall code will be attached torepo link.
Overall Output
Resources:
tailwind.css
Thank you for reading :), If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.
Keep learning! Keep coding!! 💛
Top comments (2)
Not to be rude, but these articles seem like a low effort way of getting some exposure without really adding any good value. These explanations are easily found within the Tailwind docs and it seems like you're just copying content from there ...
Isn’t that the case for almost every article about concepts? A good summary/overview, writing about what she have learned. She even add the link to the specific resource which is the official documentation. So nothing to hide but put her personal touch on it, which could help others who have difficulties reading docs.