CSS Flexbox
Justify Content
The
justify-contentproperty 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
.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>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| justify-content in Flexbox | 52 | 12 | 20 | 7 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
justify-contentworks 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 Item3center
text
Item1 Item2 Item3flex-end
text
Item1 Item2 Item3space-between
text
Item1 Item2 Item3space-around
text
Item1 Item2 Item3space-evenly
text
Item1 Item2 Item3Conclusion
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.