CSS <self-position> Data Type

The CSS <self-position> data type represents the position of an individual alignment subject within its alignment container. It provides keyword values used by CSS Box Alignment properties to position an element along the applicable alignment axis.

Syntax

The <self-position> data type accepts the following keyword values:

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

The meaning of each keyword depends on the alignment axis, writing mode, and layout context.

Self-position Values

Value	Description
`center`	Centers the alignment subject within its alignment container.
`start`	Aligns the subject with the start edge of the alignment container.
`end`	Aligns the subject with the end edge of the alignment container.
`self-start`	Aligns the subject with the edge corresponding to the subject's own start side.
`self-end`	Aligns the subject with the edge corresponding to the subject's own end side.
`flex-start`	Aligns the subject toward the flex container's start side when used in a flex formatting context.
`flex-end`	Aligns the subject toward the flex container's end side when used in a flex formatting context.

start and end Values

The start and end keywords align the subject relative to the start or end edge of its alignment container. These are logical values, so their physical direction can change according to the writing mode and alignment axis.

.start {
  align-self: start;
}
.end {
  align-self: end;
}

self-start and self-end Values

The self-start and self-end keywords use the alignment subject's own writing mode to determine which side corresponds to its start or end edge.

.self-start {
  align-self: self-start;
}
.self-end {
  align-self: self-end;
}

This distinction can be important when the alignment subject uses a different writing mode or direction from its container.

Flex Alignment Values

The flex-start and flex-end keywords align an item relative to the start or end of a flex container. Their behavior is tied to the flex layout's main or cross axis, depending on the property where they are used.

.flex-start {
  align-self: flex-start;
}
.flex-end {
  align-self: flex-end;
}

Outside a flex formatting context, these values generally behave like start and end, respectively.

<self-position> Example

The following example uses align-self to give three flex items different positions along the cross axis:

.start {
  align-self: start;
}
.center {
  align-self: center;
}
.end {
  align-self: end;
}

Browser Result

start

center

end

Each item uses a different <self-position> value to control its alignment within the flex container.

The <self-position> data type is used by CSS alignment properties that position individual alignment subjects, including:

Specifications

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

CSS <self-position> Data Type