Align Items
These utility classes control how flex and grid items line up across the container’s cross axis, which is the axis perpendicular to the one its children flow along. Reach for them any time the default alignment of a cluster, stack, flank, split, or grid doesn’t match what you’re after: centering icons next to text, making all cards in a row share the same height, or pinning form labels to the top of each row.
| Class Name | align-items Value | Preview |
|---|---|---|
cs-align-items-baseline | baseline | |
cs-align-items-center | center | |
cs-align-items-end | flex-end | |
cs-align-items-start | flex-start | |
cs-align-items-stretch | stretch |
Override with Align Self
When you need a flex or grid item to deviate from the align-items property of its container, use the cs-align-self-* classes to set the item’s align-self property and individually change its alignment on the container’s cross axis.
| Class Name | align-self Value | Preview |
|---|---|---|
cs-align-self-center | center | |
cs-align-self-baseline | baseline | |
cs-align-self-end | flex-end | |
cs-align-self-start | flex-start | |
cs-align-self-stretch | stretch |
What’s the Cross Axis?
The cross axis runs perpendicular to a container’s content direction. For containers where flex-direction is row and content flows in the inline direction, the cross axis runs in the block direction. For containers where flex-direction is column and content flows in the block direction, the cross axis runs in the inline direction.