Flex Wrap

vel-src: flexbox.css

Utilities for controlling how flex items wrap.

Class	Properties
vel-flex-nowrap	flex-wrap: nowrap
vel-flex-wrap	flex-wrap: wrap
vel-flex-wrap-reverse	flex-wrap: wrap-reverse

Examples

Wrap

Item 1

Item 2

Item 3

Item 4

Item 5

example.html

<div class="vel-flex vel-flex-wrap vel-gap-3" style="width:280px">
  <div class="vel-bg-primary vel-text-white vel-py-2 vel-px-5 vel-rounded-md">Item 1</div>
  <div class="vel-bg-primary vel-text-white vel-py-2 vel-px-5 vel-rounded-md">Item 2</div>
  <div class="vel-bg-primary vel-text-white vel-py-2 vel-px-5 vel-rounded-md">Item 3</div>
  <div class="vel-bg-primary vel-text-white vel-py-2 vel-px-5 vel-rounded-md">Item 4</div>
  <div class="vel-bg-primary vel-text-white vel-py-2 vel-px-5 vel-rounded-md">Item 5</div>
</div>

No Wrap (overflow)

Item 1

Item 2

Item 3

Item 4

example.html

<div class="vel-flex vel-flex-nowrap vel-gap-3 vel-overflow-hidden" style="width:280px">
  <div class="vel-bg-danger vel-text-white vel-py-2 vel-px-5 vel-rounded-md" style="flex-shrink:0">Item 1</div>
  <div class="vel-bg-danger vel-text-white vel-py-2 vel-px-5 vel-rounded-md" style="flex-shrink:0">Item 2</div>
  <div class="vel-bg-danger vel-text-white vel-py-2 vel-px-5 vel-rounded-md" style="flex-shrink:0">Item 3</div>
  <div class="vel-bg-danger vel-text-white vel-py-2 vel-px-5 vel-rounded-md" style="flex-shrink:0">Item 4</div>
</div>