Place Self

vel-src: flexbox.css

Utilities for controlling how an individual item is justified and aligned at the same time.

Class	Properties
vel-place-self-auto	place-self: auto
vel-place-self-center	place-self: center
vel-place-self-start	place-self: start
vel-place-self-end	place-self: end
vel-place-self-stretch	place-self: stretch

Examples

Per-item place-self

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;height:140px">
  <div class="vel-place-self-start vel-bg-primary vel-text-white vel-rounded-md" style="padding:8px 12px;font-size:12px">self-start</div>
  <div class="vel-place-self-center vel-bg-success vel-text-white vel-rounded-md" style="padding:8px 12px;font-size:12px">self-center</div>
  <div class="vel-place-self-end vel-bg-danger vel-text-white vel-rounded-md" style="padding:8px 12px;font-size:12px">self-end</div>
</div>