📏 CSS Tutorial: justify-content

📌 Introduction

The justify-content property in CSS is used within a Flexbox or Grid container to control how items are aligned **along the main axis**. It handles spacing, distribution, and alignment of flex items horizontally (in row direction) or vertically (in column direction). This is one of the most important layout tools in modern CSS! ✨

🎯 What Does justify-content Do?

  • Aligns items along the main axis in a flex or grid container
  • Controls spacing between items
  • Supports many distribution patterns
  • Changes behavior based on flex-direction

✨ Syntax

Syntax

.container {
  display: flex;
  justify-content: <value>;
}

Note

If flex-direction: row → main axis = horizontal If flex-direction: column → main axis = vertical

🧩 justify-content Values

1. flex-start (default)

Items align to the start of the main axis.

Code Snippet

justify-content: flex-start;

2. flex-end

Items align to the end of the main axis.

Code Snippet

justify-content: flex-end;

3. center

Items are centered along the main axis.

Code Snippet

justify-content: center;

4. space-between

First item goes to start, last goes to end, the rest are spaced equally in between.

Code Snippet

justify-content: space-between;

5. space-around

Equal space around each item. Outer items get half space on edges.

Code Snippet

justify-content: space-around;

6. space-evenly

Equal spacing between **all** items and edges.

Code Snippet

justify-content: space-evenly;

7. start / end / left / right

Logical alignment keywords (depend on writing direction such as LTR or RTL).

Code Snippet

justify-content: start;

8. safe / unsafe

Prevent items from being pushed out of the container (safe) or allow overflow (unsafe).

Code Snippet

justify-content: safe center;

🔥 Practical Examples

1. Center Items Horizontally

Center Horizontally

.container {
  display: flex;
  justify-content: center;
}

2. Navigation Menu with Spacing

Space Between Navigation

nav {
  display: flex;
  justify-content: space-between;
}

3. Buttons with Equal Spacing

Space Evenly

.buttons {
  display: flex;
  justify-content: space-evenly;
}

4. RTL Support (Arabic / Hebrew Layouts)

Logical Alignment

.rtl-container {
  direction: rtl;
  display: flex;
  justify-content: start; /* aligns to right side */
}

5. Vertical Alignment (Column Direction)

Column Axis

.column-box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers vertically */
}

📊 Visual Summary

ValueEffect
flex-startItems pushed to start
flex-endItems pushed to end
centerItems centered
space-betweenEqual gaps between items
space-aroundSpace around each item
space-evenlyEqual spacing everywhere

🧠 Tips & Best Practices

  • Use center for clean, balanced UI sections
  • Use space-between for navigation bars or header layouts
  • Use space-evenly for evenly spaced buttons or menus
  • Remember: behavior changes based on flex-direction
>>“Flexbox alignment turns complex layouts into simple, elegant, and responsive systems.” ✨

🎉 Conclusion

The justify-content property is one of the most fundamental alignment tools in Flexbox and Grid. It controls how items are distributed along the main axis — making layouts cleaner and more intuitive. Mastering this property helps you build professional, responsive interfaces effortlessly. 🚀