Docs / Place Content

Place Content

vel-src: flexbox.css

Utilities for controlling how content is justified and aligned at the same time.

ClassProperties
vel-place-content-centerplace-content: center
vel-place-content-startplace-content: start
vel-place-content-endplace-content: end
vel-place-content-betweenplace-content: space-between

Examples

Place content variants

vel-place-content-start

A
B

vel-place-content-center

A
B

vel-place-content-end

A
B
example.html
<div class="vel-flex vel-gap-4">
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-place-content-start</p>
    <div class="vel-grid vel-grid-cols-2 vel-place-content-start vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:120px">
      <div class="vel-bg-primary vel-text-white vel-rounded-sm vel-text-center" style="padding:8px;font-size:12px">A</div>
      <div class="vel-bg-primary vel-text-white vel-rounded-sm vel-text-center" style="padding:8px;font-size:12px">B</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-place-content-center</p>
    <div class="vel-grid vel-grid-cols-2 vel-place-content-center vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:120px">
      <div class="vel-bg-success vel-text-white vel-rounded-sm vel-text-center" style="padding:8px;font-size:12px">A</div>
      <div class="vel-bg-success vel-text-white vel-rounded-sm vel-text-center" style="padding:8px;font-size:12px">B</div>
    </div>
  </div>
  <div style="flex:1">
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-place-content-end</p>
    <div class="vel-grid vel-grid-cols-2 vel-place-content-end vel-gap-2" style="background:#1a2236;padding:8px;border-radius:6px;height:120px">
      <div class="vel-bg-danger vel-text-white vel-rounded-sm vel-text-center" style="padding:8px;font-size:12px">A</div>
      <div class="vel-bg-danger vel-text-white vel-rounded-sm vel-text-center" style="padding:8px;font-size:12px">B</div>
    </div>
  </div>
</div>