Justify Items

vel-src: flexbox.css

Utilities for controlling how grid items are aligned along their inline axis.

Class	Properties
vel-justify-items-start	justify-items: start
vel-justify-items-end	justify-items: end
vel-justify-items-center	justify-items: center
vel-justify-items-stretch	justify-items: stretch

Examples

Justify items variants

vel-justify-items-start

vel-justify-items-center

vel-justify-items-end

example.html

<div class="vel-flex vel-gap-4">
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-justify-items-start</p>
    <div class="vel-grid vel-grid-cols-2 vel-justify-items-start vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px">
      <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:6px 12px;font-size:12px">B</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-justify-items-center</p>
    <div class="vel-grid vel-grid-cols-2 vel-justify-items-center vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px">
      <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:6px 12px;font-size:12px">B</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-justify-items-end</p>
    <div class="vel-grid vel-grid-cols-2 vel-justify-items-end vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px">
      <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:6px 12px;font-size:12px">B</div>
    </div>
  </div>
</div>