Align Items

vel-src: flexbox.css

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

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

Examples

Align variants

vel-items-start

vel-items-center

vel-items-end

example.html

<div class="vel-flex vel-gap-4">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-items-start</p>
    <div class="vel-flex vel-items-start vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:80px">
      <div class="vel-bg-primary vel-text-white vel-rounded-sm" style="padding:6px 12px;font-size:12px">A</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-sm" style="padding:16px 12px;font-size:12px">B</div>
    </div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-items-center</p>
    <div class="vel-flex vel-items-center vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:80px">
      <div class="vel-bg-success vel-text-white vel-rounded-sm" style="padding:6px 12px;font-size:12px">A</div>
      <div class="vel-bg-success vel-text-white vel-rounded-sm" style="padding:16px 12px;font-size:12px">B</div>
    </div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-items-end</p>
    <div class="vel-flex vel-items-end vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:80px">
      <div class="vel-bg-danger vel-text-white vel-rounded-sm" style="padding:6px 12px;font-size:12px">A</div>
      <div class="vel-bg-danger vel-text-white vel-rounded-sm" style="padding:16px 12px;font-size:12px">B</div>
    </div>
  </div>
</div>