Style justifyContent Attribute

Definition and Usage

When items do not use all the available space on the main axis (horizontal), justifyContent Aligns items in the flexible container.

Tip:Use alignContent Aligns items on the horizontal axis (vertical).

See Also:

CSS Reference Manual:justify-content Attribute

Example

Leave some space between the items of the elastic <div> element:

document.getElementById("main").style.justifyContent = "space-between";

Try It Yourself

Syntax

Return justifyContent Attribute:

object.style.justifyContent

Set justifyContent Attribute:

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

Attribute Value

Value Description
flex-start Default Value. Items are located at the beginning of the container.
flex-end Items are located at the end of the container.
center Items are located at the center of the container.
space-between Leaves space for items between the lines.
space-around Leaves space for items before, between, and after the line.
initial Sets this attribute to its default value. See initial.
inherit Inherits this attribute from its parent element. See inherit.

Technical Details

Default Value: flex-start
Return Value: A string representing the element's justify-content Attribute.
CSS Version: CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 12.0 Support 9.0 Support

Related Pages

HTML DOM STYLE Reference Manual:alignContent Attribute

HTML DOM STYLE Reference Manual:alignItems Attribute

HTML DOM STYLE Reference Manual:alignSelf Attribute