Flexbox

Align Items

Utilities for sets flex items position along a container's cross axis.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
items-baseline	align-items: baseline
items-start	align-items: flex-start
items-center	align-items: center
items-end	align-items: flex-end
items-stretch	align-items: stretch

Usage

items-baseline

<!-- parent -->
<div class="flex items-baseline">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .items-baseline;

SCSS

items-start

<!-- parent -->
<div class="flex items-start">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .items-start;

SCSS

items-center

<!-- parent -->
<div class="flex items-center">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .items-center;
}

SCSS

items-end

<!-- parent -->
<div class="flex items-end">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .items-end;
}

SCSS

items-stretch

<!-- parent -->
<div class="flex items-stretch">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex,
    .items-stretch;
}

SCSS