CSS `justify-content`: Mastering Main-Axis Alignment in Flexbox Layouts

Learn how to use the CSS `justify-content` property to control the alignment of items along the main axis of a flex container. This tutorial explains its various values (flex-start, flex-end, center, space-around, space-between, space-evenly), demonstrating how to arrange items and manage spacing for creating well-structured and visually appealing flexbox layouts.

Understanding CSS `justify-content`

Aligning Items Along the Main Axis

The CSS `justify-content` property controls the alignment of items along the main axis of a flex container. The main axis is the direction in which flex items are placed (determined by the `flex-direction` property). `justify-content` affects the space *between* and *around* items within the container.

Note: `justify-content` only affects alignment along the main axis. For vertical alignment, use `align-items`.

If there are flexible items with `flex-grow` set to a value other than zero, `justify-content` will have no effect because items will expand to fill available space. It's most effective when the item sizes are fixed or use `auto` margins.

`justify-content` Syntax and Values

The syntax is:

The default value is `flex-start`.

Value	Description
`flex-start`	Items are aligned to the start of the container.
`flex-end`	Items are aligned to the end of the container.
`center`	Items are centered within the container.
`space-between`	Items are evenly distributed, with the first item at the start and the last item at the end.
`space-around`	Items are evenly distributed, with equal space around each item.
`space-evenly`	Items are evenly distributed, with equal space between items and at both ends.
`initial`	Sets the property to its default value (`flex-start`).
`inherit`	Inherits the value from its parent element.

Examples of `justify-content`

The following examples illustrate how each value of the `justify-content` property affects the alignment of items within a flex container. These examples would typically include HTML to create the flex container and items (e.g., divs) and CSS to set the `display: flex` property for the container and the `justify-content` property for the specific alignment behavior.

flex-start

Items aligned to the start of the container.

flex-end

Items aligned to the end of the container.

center

Items centered within the container.

space-between

Items evenly spaced, first at the start, last at the end.

space-around

Items evenly spaced, with space around each item.

space-evenly

Items evenly spaced, including space at both ends.

initial

Resets to the default value (`flex-start`).

inherit

Inherits the value from the parent element.

Browser Support

The `justify-content` property is widely supported by modern browsers, including:

Google Chrome (version 29 and above)
Internet Explorer (version 11 and above)
Microsoft Edge (version 12 and above)
Opera (version 12.1 and above)
Firefox (version 20 and above)
Safari (version 9 and above)