Align Items

Utilities for controlling how flex items are positioned along a container's cross axis.

Class	Properties
.ai-stretch	align-items: stretch
.ai-start	align-items: flex-start;
.ai-center	align-items: center;
.ai-end	align-items: flex-end;
.ai-baseline	align-items: baseline;

Stretch

Use .ai-stretch to stretch items to fill the flex container's cross axis.

1

2

3

Start

Use .ai-start to align items to the start of the flex container's cross axis.

1

2

3

Center

Use .ai-center to align items along the center of the flex container's cross axis..

1

2

3

End

Use .ai-end to align items to the end of the flex container's cross axis.

1

2

3

Baseline

Use .ai-baseline to align items along the flex container's cross axis such that all of their baselines align.

1

2

3

Responsive

To control the alignment of flex items at a specific breakpoint, add @{breakpoint} add the end of the utility class.

1

2

3

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.