Vertical Placement

1. Reference baseline
2. Reference middle
3. Reference sub
4. Reference super

Relative and Absolute Positioning

Overflowing div, styled position: relative. Shows pseudo-elements affected by scrolling while position: absolute.

Placement properties

Placement is declared (axis)-(target): (value). There are 9 combinations from three axis prefixes times three target suffixes.

• justify-* in flex sets main axis
• justify-* in grid or multi-col sets inline axis
• align-* in flex cross axis
• align-* in grid or block sets block axis
• place-* sets both axis

• *-self places the element, according value
• *-items places direct children
• *-content places children and wrapped lines

Axis per Display Type

Each display type has two axis used to desribe the flow of items and its orthogonal complement.

• Block, multi-col block axis: towards which blocks (like paragraphs) flow, more generally all display: block
• Block, multi-col inline axis: towards which inlines (like anchors) flow, more generally all display: inline or display: inline-block
• Flex main axis: towards which fitting elements flow, by flex-direction (row/column: horizontal/vertical).
• Flex cross axis: towards which overflow wrapping elements flow, by flex-wrap.