Align Items

Class reference

Stretch

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

Start

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

Center

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

End

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

Baseline

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

Responsive

To control the alignment of flex items at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:items-center to apply the items-center utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

null

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'align-items', 'property' => 'alignItems', ], 'variants' => [ 'responsive', ], ])