Flexbox

Align Self

Utilities for controls how an individual flex item is positioned along 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
self-auto	align-self: auto
self-baseline	align-self: baseline
self-start	align-self: flex-start
self-center	align-self: center
self-end	align-self: flex-end
self-stretch	align-self: stretch

Usage

self-auto

<!-- parent -->
<div class="flex">
  <-- child -->
  <div class="self-auto">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .self-auto;
}

SCSS

self-baseline

<div class="flex">
  <div class="self-baseline">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .self-baseline;
}

SCSS

self-auto

<div class="flex">
  <div class="self-start">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .self-start;
}

SCSS

self-auto

<div class="flex">
  <div class="self-center">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .self-center;
}

SCSS

self-auto

<div class="flex">
  <div class="self-end">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .self-end;
}

SCSS

self-auto

<div class="flex">
  <div class="self-stretch">
    ...
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}
.dummy-child {
  @extend
    .self-stretch;
}

SCSS