Menu Samaritan's Purse

JUSTIFY-CONTENT

The justify-content property aligns the contents of the box as a whole within the box itself along the inline/row/main axis of the box.

SYNTAX

CSS

justify-content: value;

JS

object.style.justifyContent = "value";

VALUES

<'justify-content'> = normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
normal

Represents the default alignment for the layout mode.

<content-distribution> = space-between | space-around | space-evenly | stretch
space-between

The alignment subjects are evenly distributed in the alignment container.

space-around

The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end.

space-evenly

The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

stretch

If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.

<overflow-position> = unsafe | safe
unsafe

Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.

safe

If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.

<content-position> = center | start | end | flex-start | flex-end
center

Centers the alignment subject within its alignment container.

start

Aligns the alignment subject to be flush with the alignment container's start edge in the appropriate axis.

end

Aligns the alignment subject to be flush with the alignment container's end edge in the appropriate axis.

flex-start

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. Only used in flex layout.

flex-end

Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Only used in flex layout.

left

Aligns the alignment subject to be flush with the alignment container's line-left or physical left edge, whichever is in the appropriate axis.

right

Aligns the alignment subject to be flush with the alignment container's line-right or physical right edge, whichever is in the appropriate axis.

INITIAL

normal

EXAMPLES

NORMAL

CONTENT-DISTRIBUTION | SPACE-BETWEEN

CONTENT-DISTRIBUTION | SPACE-AROUND

CONTENT-DISTRIBUTION | SPACE-EVENLY

CONTENT-DISTRIBUTION | STRETCH

OVERFLOW-POSITION | UNSAFE

OVERFLOW-POSITION | SAFE

CONTENT-POSITION | CENTER

CONTENT-POSITION | START

CONTENT-POSITION | END

CONTENT-POSITION | FLEX-START

CONTENT-POSITION | FLEX-END

LEFT

RIGHT

JS

INTERNAL

align-content

align-items

align-self

justify-items

justify-self

place-content

place-items

place-self

EXTERNAL

World Wide Web Consortium (W3C)