Justify content controls how flex items are spaced along the main axis of a flex container.
If your flex direction is row, justify content works horizontally.
If your flex direction is column, it works vertically.
This property is very important for creating clean and balanced layouts.
Flex-start is the default value.
Items are placed at the beginning of the container, leaving extra space at the end.
Center places all items in the middle of the container.
This is often used to align buttons, cards, and menu items neatly.
Space-between pushes items to opposite ends.
This layout is commonly used in headers where the logo is on the left and the menu is on the right.
Common justify-content values
- flex-start aligns items at the start
- center aligns items in the middle
- flex-end aligns items at the end
- space-between spreads items across the container
- space-around adds equal space around items
Space-around gives each item equal spacing on both sides.
This makes layouts look balanced and well spaced.
Practice task
Create a flex container and:
- Try justify-content flex-start
- Change it to center
- Then try space-between and space-around
- Observe how spacing changes
Next lesson
In the next page, you will learn about align-items and how to align elements vertically in Flexbox.