The justify-content property in CSS is used to describe the align of the flexible box container. It contains the space between and around content items along the main axis of a flex container is distributed in a browser.
Note: This property cannot be used to describe items or containers along the vertical axis.
Syntax:
justify-content: flex-start|flex-end|center|space-between| space-around|space-evenly|initial|inherit;
Property Values:
- flex-start: It is used to align flex items from the start of the container.
Syntax:
justify-content: flex-start;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-start;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- flex-end: It is used to align flex items at the end of the container.
Syntax:
justify-content: flex-end;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-end;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- center: It align flex items at the center of container.
Syntax:
justify-content: center;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: center;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- space-between: The flex items are placed with even spacing where the item is pushed to start and last item is pushed to end.
Syntax:
justify-content: space-between;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: space-between;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- space-around: The flex items are placed with equal spacing from each others, the corners.
Syntax:
justify-content: space-around;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: space-around;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- space-evenly: The items are positioned with equal spacing between them but the spacing from corners differ.
Syntax:
justify-content: space-evenly;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: space-evenly;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- initial: The items are placed according to the default value.
Syntax:
justify-content: initial;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: initial;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- inherit: The items are placed according to its inherited parent element value.
Syntax:
justify-content: inherit;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS justify-content Property
</
title
>
<
style
>
#box {
display: flex;
border: 1px solid black;
justify-content: inherit;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver );
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"box"
>
<
div
>1
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>2
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>3
<
p
>GeeksForGeeks</
p
>
</
div
>
<
div
>4
<
p
>GeeksForGeeks</
p
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Supported Browsers: The browser supported by CSS justify-content property are listed below:
- Google Chrome 29.0, 21.0 -webkit-
- Internet Explorer 11.0
- Firefox 28.0, 18.0 -moz-
- Opera 17.0
- Safari 9.0, 6.1 -webkit-