Skip to main content
MybringDesign System

Wrap

Utilities for controlling how flex items wrap

When to use

Sets whether flex items are forced onto one line or can wrap onto multiple lines along or opposite to the main axis direction.

Class Declaration Usage
flex-wrap flex-wrap: wrap; Parent Allows flex children to wrap.
flex-wrap-reverse flex-wrap: wrap-reverse; Parent Allows flex children to wrap reverse to the main axis direction, but keeps the direction on each line.
flex-nowrap flex-wrap: nowrap; Parent Prevents flex items from wrapping, keeping them all on one line. Causes inflexible items to overflow the container. This is the default.

Examples

Wrap

A – – – – – – – – – – – – – – – –
B – – – – – –
C – – – – – – – – – – – – – – – – – – – –
<div class="bg-gray4 paxs flex flex-wrap">
  <div class="examplebox">A – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – –</div>
  <div class="examplebox">C – – – – – – – – – – – – – – – – – – – –</div>
</div>

Wrap reverse

A – – – – – – – – – – – – – – – –
B – – – – – –
C – – – – – – – – – – – – – – – – – – – –
<div class="bg-gray4 paxs flex flex-wrap-reverse">
  <div class="examplebox">A – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – –</div>
  <div class="examplebox">C – – – – – – – – – – – – – – – – – – – –</div>
</div>

Nowrap / default

A – – – – – – – – – – – – – – – –
B – – – – – –
C – – – – – – – – – – – – – – – – – – – –
<div class="bg-gray4 paxs flex flex-nowrap">
  <div class="examplebox">A – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – –</div>
  <div class="examplebox">C – – – – – – – – – – – – – – – – – – – –</div>
</div>