Justify Content

Written by Swapnil RajaUpdated 30 Jul 2026

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 supporting concepts are explained in Flex Direction and Align 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

PreviousFlex Direction NextAlign Items

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

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;

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>

Justify Content

Syntax

Attributes

Example

Browser Support

Notes

Visual Comparison

Conclusion