Easy Tutorial
❮ Jsref Trim Prop Url Disabled ❯

justifyContent Property

Style Object

Example

Leave space around the items of a flexible <div> element:


Definition and Usage

The justifyContent property aligns the items within a flexible container when the items do not use all available space on the main axis (horizontally).

Tip: Use the alignContent property to align items on the cross axis (vertically).


Browser Support

Firefox, Opera, and Chrome support the justify-content property.


Syntax

Return the justifyContent property:

Set the justifyContent property:

Property Values

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

Technical Details

Default Value: flex-start
Return Value: A string, representing the justify-content property of the element.
--- ---
CSS Version CSS3
--- ---

Related Articles

CSS Reference: justify-content Property

HTML DOM STYLE Reference: alignContent Property

HTML DOM STYLE Reference: alignItems Property

HTML DOM STYLE Reference: alignSelf Property


Style Object

❮ Jsref Trim Prop Url Disabled ❯