Flex

vel-src: flexbox.css

Utilities for controlling how flex items both grow and shrink.

Class	Properties
vel-flex-1	flex: 1 1 0%
vel-flex-auto	flex: 1 1 auto
vel-flex-initial	flex: 0 1 auto
vel-flex-none	flex: none

Examples

Flex 1 (equal share)

flex-1

example.html

<div class="vel-flex vel-gap-3">
  <div class="vel-flex-1 vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px">flex-1</div>
  <div class="vel-flex-1 vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px">flex-1</div>
  <div class="vel-flex-1 vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:12px">flex-1</div>
</div>

Flex none (don't grow/shrink)

flex-1 (grows)

flex-none (fixed)

example.html

<div class="vel-flex vel-gap-3">
  <div class="vel-flex-1 vel-bg-surface-3 vel-text-muted vel-rounded-md vel-text-center" style="padding:12px;border:1px dashed #1e2d45">flex-1 (grows)</div>
  <div class="vel-flex-none vel-bg-success vel-text-white vel-rounded-md" style="padding:12px 24px;white-space:nowrap">flex-none (fixed)</div>
</div>