Justify Content

vel-src: flexbox.css

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

Class	Properties
vel-justify-start	justify-content: flex-start
vel-justify-end	justify-content: flex-end
vel-justify-center	justify-content: center
vel-justify-between	justify-content: space-between
vel-justify-around	justify-content: space-around
vel-justify-evenly	justify-content: space-evenly

Examples

Start, Center, Between

vel-justify-start

vel-justify-center

vel-justify-between

example.html

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