Skip to main content

Flex Wraps

Version: 2.0.0
Edit

Utilities for setting the flex-wrap property of a flex container.

Wrap

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-wraps.scss#L11

Flex item 1
Flex item 2
Flex item 3
<!-- flex wrap wrap -->
<div class="u-flex-wrap-wrap">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Nowrap

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-wraps.scss#L21

Flex item 1
Flex item 2
Flex item 3
<!-- flex wrap nowrap -->
<div class="u-flex-wrap-nowrap">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Wrap Reverse

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-wraps.scss#L31

Flex item 1
Flex item 2
Flex item 3
<!-- flex wrap wrap reverse -->
<div class="u-flex-wrap-wrap-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Globals

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-wraps.scss#L55

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<!-- flex wrap inherit -->
<div class="u-flex-wrap-inherit">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- flex wrap initial -->
<div class="u-flex-wrap-initial">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- flex wrap unset -->
<div class="u-flex-wrap-unset">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>