CSS Flexbox

Justify Content

The justify-content property is used to control the horizontal alignment and spacing of flex items along the main axis of a flex container.

It determines how extra space is distributed between and around flex items.

The justify-content property works only on a flex container and is one of the most commonly used Flexbox properties.

Syntax

Justify Content Syntax

css

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

Justify Content Example

css

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

This centers all flex items horizontally within the container.

Attributes

Value	Description	Example
flex-start	Aligns items at the beginning	justify-content: flex-start;
center	Centers items horizontally	justify-content: center;
flex-end	Aligns items at the end	justify-content: flex-end;
space-between	Equal space between items	justify-content: space-between;
space-around	Equal space around items	justify-content: space-around;
space-evenly	Equal spacing everywhere	justify-content: space-evenly;

Example

Justify Content Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>Justify Content Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            border: 2px solid black;
            padding: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Output

Browser Output

css

Three flex items will appear in a row
The first item will be aligned to the left
The last item will be aligned to the right
Equal space will be distributed between the items

Item 1               Item 2               Item 3

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Partial

Notes

justify-content works along the main axis.
For flex-direction: row, it controls horizontal alignment.
For flex-direction: column, it controls vertical alignment.
It only affects flex items inside a flex container.
Often used together with align-items.

Visual Comparison

flex-start

text

Item1 Item2 Item3

center

text

      Item1 Item2 Item3

flex-end

text

                Item1 Item2 Item3

space-between

text

Item1      Item2      Item3

space-around

text

  Item1    Item2    Item3

space-evenly

text

   Item1   Item2   Item3

Conclusion

The justify-content property provides precise control over how flex items are distributed within a flex container. It helps create balanced, responsive, and visually appealing layouts by managing spacing and alignment along the main axis.

PreviousFlex Direction NextAlign Items