Style justifyContent Property
Style ObjectExample
Leave space around the items of a flexible <div> element:
document.getElementById("main".style.justifyContent="space-between";
Try it Yourself »
Definition and Usage
The justifyContent property aligns the items in a flexible container when the items do not occupy all available space on the main axis (horizontally).
Tip:Use the alignContent property to align the items on the cross axis (vertically).
Browser Support
Firefox, Opera, and Chrome support the justify-content property.
Syntax
Return the justifyContent property:
object.style.justifyContent
Set the justifyContent property:
object.style.justifyContent="flex-start|flex-end|center|space-between|space-around|initial|inherit"
Property Values
| Value | Description |
|---|---|
| flex-start | Default value. The items are positioned at the beginning of the container. |
| flex-end | The items are positioned at the end of the container. |
| center | The items are positioned at the center of the container. |
| space-between | The items are positioned in the container with space between the lines. |
| space-around | The items are positioned in the container with space before, between, and after the lines. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | flex-start |
|---|---|
| Return value: | A string representing the element's justify-content property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference Manual:justify-content property
HTML DOM Style Reference Manual:alignContent property
HTML DOM Style Reference Manual:alignItems property
HTML DOM Style Reference Manual:alignSelf property
Other Extensions