Style justifyContent Property

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 Ժամանակ

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 Property:

object.style.justifyContent

Set justifyContent Property:

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

Property Value

Value Description
flex-start Default Value. Items are at the beginning of the container.
flex-end Items are at the end of the container.
center Items are centered in 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 property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical Details

Default Value: flex-start
Return Value: String ներկայացնում է տարրի justify-content Ժամանակ.
CSS Վերսիա: CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Հասանելիություն 12.0 Հասանելիություն 9.0 Հասանելիություն

Տես նաև

HTML DOM STYLE փաստաթուղթ:alignContent Ժամանակ

HTML DOM STYLE փաստաթուղթ:alignItems Ժամանակ

HTML DOM STYLE փաստաթուղթ:alignSelf এট্রিবিউট