Align Items
Web Awesome includes classes to set the align-items property of flex and grid containers. Use these wa-align-items-* classes 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 |
Override with Align Self
Jump to heading
When you need a flex or grid item to deviate from the align-items property of its container, use the wa-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 |
|---|---|---|
wa-align-self-center |
center |
|
wa-align-self-baseline |
baseline |
|
wa-align-self-end |
flex-end |
|
wa-align-self-start |
flex-start |
|
wa-align-self-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.