Align Content

vel-src: flexbox.css

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

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

Examples

Align content variants

vel-content-start

vel-content-between

vel-content-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-content-start</p>
    <div class="vel-flex vel-flex-wrap vel-content-start vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:120px;width:140px">
      <div class="vel-bg-primary vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">A</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">B</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-sm vel-opacity-50" style="padding:6px 10px;font-size:12px">C</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-content-between</p>
    <div class="vel-flex vel-flex-wrap vel-content-between vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:120px;width:140px">
      <div class="vel-bg-success vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">A</div>
      <div class="vel-bg-success vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">B</div>
      <div class="vel-bg-success vel-text-white vel-rounded-sm vel-opacity-50" style="padding:6px 10px;font-size:12px">C</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-content-end</p>
    <div class="vel-flex vel-flex-wrap vel-content-end vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:120px;width:140px">
      <div class="vel-bg-danger vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">A</div>
      <div class="vel-bg-danger vel-text-white vel-rounded-sm" style="padding:6px 10px;font-size:12px">B</div>
      <div class="vel-bg-danger vel-text-white vel-rounded-sm vel-opacity-50" style="padding:6px 10px;font-size:12px">C</div>
    </div>
  </div>
</div>