The <self-position> enumerated value data type is used by the justify-self and align-self properties, and the place-self shorthand, to align the box within its alignment container. It is also used by the justify-items and align-items properties, and the place-items shorthand, to specify default values for justify-self and align-self.

Syntax

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

Values

The following keyword values are represented by the <self-position> grammar term:

center

Centers the alignment subject within its alignment container.

start

Aligns the alignment subject flush with the alignment container's start edge.

end

Aligns the alignment subject flush with the alignment container's end edge.

self-start

Aligns the alignment subject flush with the edge of the alignment container corresponding to the alignment subject's start side.

self-end

Aligns the alignment subject flush with the edge of the alignment container corresponding to the alignment subject's end side.

flex-start

In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. It is identical to start for layout modes other than flex layout.

flex-end

In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Identical to end for layout modes other than flex layout.

Specifications

See also

• Properties that use this data type: align-self, justify-self, place-self, align-items, justify-items, place-items
• Other box alignment data types: <baseline-position>, <content-distribution>, <overflow-position>, and <content-position>
• CSS box alignment module
• CSS flexible box layout module
• CSS grid layout module