Flex Basis

vel-src: flexbox.css

Utilities for controlling the initial size of flex items.

Class	Properties
vel-basis-auto	flex-basis: auto
vel-basis-0	flex-basis: 0px
vel-basis-full	flex-basis: 100%
vel-basis-1/2	flex-basis: 50%
vel-basis-1/3	flex-basis: 33.333%
vel-basis-2/3	flex-basis: 66.667%
vel-basis-1/4	flex-basis: 25%
vel-basis-3/4	flex-basis: 75%

Examples

Fixed basis widths

basis-1/4

basis-1/2

basis-1/4

example.html

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