Flexbox

Flex Wrap

Utilities for creates how flex items wrap.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
flex-no-wrap	flex-wrap: nowrap
flex-wrap	flex-wrap: wrap
flex-wrap-reverse	flex-wrap: wrap-reverse

Usage

flex-wrap: OFF

<div class="flex flex-wrap">
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex,
    .flex-wrap;
}

SCSS