Align Self

vel-src: flexbox.css

Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.

Class	Properties
vel-self-auto	align-self: auto
vel-self-start	align-self: flex-start
vel-self-end	align-self: flex-end
vel-self-center	align-self: center
vel-self-stretch	align-self: stretch
vel-self-baseline	align-self: baseline

Examples

Per-item cross-axis alignment

self-start

self-center

self-end

self-stretch

example.html

<div class="vel-flex vel-gap-3" style="background:#1a2236;padding:12px;border-radius:6px;height:120px">
  <div class="vel-self-start vel-bg-primary vel-text-white vel-rounded-md" style="padding:8px 14px;font-size:12px">self-start</div>
  <div class="vel-self-center vel-bg-success vel-text-white vel-rounded-md" style="padding:8px 14px;font-size:12px">self-center</div>
  <div class="vel-self-end vel-bg-danger vel-text-white vel-rounded-md" style="padding:8px 14px;font-size:12px">self-end</div>
  <div class="vel-self-stretch vel-bg-info vel-text-white vel-rounded-md vel-flex vel-items-center" style="padding:8px 14px;font-size:12px">self-stretch</div>
</div>