CSS <content-position> Data Type

The CSS <content-position> data type represents keywords that position a group of alignment subjects within an alignment container. These values are used by CSS box alignment properties to place content at the start, end, or center of the available space.

Syntax

The <content-position> data type accepts five keyword values:

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

<content-position> Values

Value	Description
`center`	Centers the alignment subjects within the alignment container.
`start`	Positions the alignment subjects at the start edge of the alignment container along the appropriate axis.
`end`	Positions the alignment subjects at the end edge of the alignment container along the appropriate axis.
`flex-start`	Positions the alignment subjects at the flex container's main-start or cross-start edge, depending on the alignment property.
`flex-end`	Positions the alignment subjects at the flex container's main-end or cross-end edge, depending on the alignment property.

Start and End Values

The start and end keywords are flow-relative alignment values. Their physical direction depends on the alignment axis and the document's writing mode and direction.

The flex-start and flex-end keywords are associated with flex layout. They align content toward the appropriate start or end side of a flex container. In layout contexts where the flex-specific distinction does not apply, these values generally behave like start and end.

<content-position> Example

The following examples use justify-content to position a group of flex items at the start, center, and end of their container:

.start {
  justify-content: start;
}
.center {
  justify-content: center;
}
.end {
  justify-content: end;
}

Browser Result

start

1 2 3

center

1 2 3

end

1 2 3

The <content-position> data type is used by CSS box alignment properties, including:

Specifications

The <content-position> data type is defined in the CSS Box Alignment Module Level 3 .

CSS <content-position> Data Type