Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
Web Awesome includes classes to set the align-items property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like cluster and stack, to align children in 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 |
The cross axis runs perpendicular to a flex 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.