css type
`<self-position>` CSS type
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
startfor layout modes other than flex layout.
- : 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
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
endfor layout modes other than flex layout.
- : 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
[!NOTE] The
leftandrightkeywords are excluded from<self-position>, despite being valid positional alignment values for thejustify-*properties (justify-content,justify-self, andjustify-items), because they are not allowed in thealign-*properties (align-content,align-self, andalign-items). They are instead explicitly included in thejustify-*properties’ grammars.
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, andcontent-position - CSS box alignment module
- CSS flexible box layout module
- CSS grid layout module