Flex Wrap

Utilities for controlling how flex items wrap.

Don't wrap

Use flexWrap="nowrap" to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

<x.div display="flex" flexWrap="nowrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Wrap normally

Use flexWrap="wrap" to allow flex items to wrap:

<x.div display="flex" flexWrap="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Wrap reverse

Use flexWrap="wrap-reverse" to wrap flex items in the reverse direction:

<x.div display="flex" flexWrap="wrap-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Responsive

To control how flex items wrap at a specific breakpoint, use responsive object notation. For example, adding the property flexWrap={{ md: 'wrap-reverse' }} to an element would apply the flexWrap="wrap-reverse" utility at medium screen sizes and above.

<x.div display="flex" flexWrap={{ md: 'wrap-reverse' }}>
  {/* ... */}
</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.