Align Items
Web Awesome includes classes to set the align-items property of flex and grid containers. Use them alongside other Web Awesome layout utilities, like cluster and stack, to align items in a container on the container's cross axis.
| Class Name | align-items Value |
Preview |
|---|---|---|
wa-align-items-baseline |
baseline |
|
wa-align-items-center |
center |
|
wa-align-items-end |
flex-end |
|
wa-align-items-start |
flex-start |
|
wa-align-items-stretch |
stretch |
What's the Cross Axis?
Jump to heading
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.