Docs / Justify Self

Justify Self

vel-src: flexbox.css

Utilities for controlling how an individual grid item is aligned along its inline axis.

ClassProperties
vel-justify-self-autojustify-self: auto
vel-justify-self-startjustify-self: start
vel-justify-self-endjustify-self: end
vel-justify-self-centerjustify-self: center
vel-justify-self-stretchjustify-self: stretch

Examples

Per-item inline alignment

self-start
self-center
self-end
example.html
<div class="vel-grid vel-grid-cols-3 vel-gap-3" style="background:#1a2236;padding:12px;border-radius:6px">
  <div class="vel-justify-self-start vel-bg-primary vel-text-white vel-rounded-md" style="padding:8px 14px;font-size:12px">self-start</div>
  <div class="vel-justify-self-center vel-bg-success vel-text-white vel-rounded-md" style="padding:8px 14px;font-size:12px">self-center</div>
  <div class="vel-justify-self-end vel-bg-danger vel-text-white vel-rounded-md" style="padding:8px 14px;font-size:12px">self-end</div>
</div>