Menu
Tailwind CSS

Box Alignment

Box alignment refers to the positioning and alignment of elements within their containers. Tailwind provides a variety of utility classes to control the alignment of elements along both the main axis and the cross axis of flex containers or grid container.

 

Flexbox Alignment:


Align Items: Controls how flex items are vertically aligned within the flex container.
1. items-start: Aligns items at the top of the container (default for row direction).
2. items-end: Aligns items at the bottom of the container.
3. items-center: Centers items along the cross-axis.
4. items-baseline: Aligns items based on their baselines (useful for text elements).
5. items-stretch: Stretches items to fill the available space in the cross-axis.

 

Example:

<div class="flex justify-center items-center h-64 bg-gray-200">
 <div class="flex flex-col justify-center items-center bg-blue-300 w-24 h-24 m-2">
   <p>Item 1</p>
 </div>
 <div class="flex flex-col justify-center items-center bg-green-300 w-24 h-24 m-2">
   <p>Item 2</p>
 </div>
 <div class="flex flex-col justify-center items-center bg-yellow-300 w-24 h-24 m-2">
   <p>Item 3</p>
 </div>
</div>


Justify Content: Controls how flex items are distributed along the main axis of the flex container.

justify-start: Items align at the beginning of the container (default).
justify-end: Items align at the end of the container.
justify-center: Items are centered along the main axis.
justify-between: Items are evenly distributed with space between them.
justify-around: Similar to justify-between but with additional space at the beginning and end of the container.

 

Example:

<div class="flex flex-wrap justify-center bg-gray-200 h-64">
 <div class="bg-blue-300 w-24 h-24 m-2">
   <p>Item 1</p>
 </div>
 <div class="bg-green-300 w-24 h-16 m-2">
   <p>Item 2</p>
 </div>
 <div class="bg-yellow-300 w-24 h-32 m-2">
   <p>Item 3</p>
 </div>
</div>

 

Grid Alignment:

Align Content: Controls how rows are positioned in multi-row grid containers.

1. content-start: Aligns rows at the top of the container (default).
2. content-end: Aligns rows at the bottom of the container.
3. content-center: Centers rows within the container.
4. content-between: Distributes rows with space between them.
5. content-around: Distributes rows with additional space at the beginning and end.

 

Example:

<div class="grid grid-cols-1 content-center gap-4">
 <div class="bg-red-500 p-4">Item 1</div>
 <div class="bg-green-500 p-4">Item 2</div>
 <div class="bg-blue-500 p-4">Item 3</div>
</div>

 

Tailwind CSS