HUB Design System includes classes to set the align-items property of flex and grid
containers. They can be used alongside other HUB Design System layout utilities to align children in
container on the container’s cross axis.
Align items is a set of layout utility classes to help you organize content that can adapt to any device or screen size.
| Class Name | Value | Preview |
|---|---|---|
hds-align-items-baseline |
baseline |
|
hds-align-items-center |
center |
|
hds-align-items-end |
flex-end |
|
hds-align-items-start |
flex-start |
|
hds-align-items-stretch |
stretch |
|
What’s a cross axis?
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.