↕️ Tailwind CSS - Align (Content, Items & Self)

Align Content utilities control how rows of flex/grid items are distributed along the cross axis when there is extra space. This only has effect when there are multiple lines of items (flex-wrap or multi-row grid).

Available utilities:

• content-normal – Default packing
• content-start – Lines at the start
• content-end – Lines at the end
• content-center – Lines centered
• content-between – Space between lines
• content-around – Space around lines
• content-evenly – Space evenly distributed
• content-stretch – Lines stretch to fill
• content-baseline – Lines aligned to baseline

Align Items utilities control how flex and grid items are aligned along the cross axis (vertical for flex-row). This maps to the CSS align-items property.

Available utilities:

• items-start – Items at the start of cross axis
• items-end – Items at the end of cross axis
• items-center – Items centered on cross axis
• items-baseline – Items aligned to text baseline
• items-stretch – Items stretch to fill (default)

Align Self utilities override the align-items value for individual flex or grid items. This maps to the CSS align-self property.

Available utilities:

• self-auto – Inherits from parent align-items
• self-start – Align to start of cross axis
• self-end – Align to end of cross axis
• self-center – Center on cross axis
• self-stretch – Stretch to fill
• self-baseline – Align to baseline