Photo byΒ ZdenΔk MachΓ‘Δek
Flex
Introduction
Natura11y's flexbox utilities provide options for creating one-dimensional layouts. Some flexbox utilities deal with horizontal and vertical alignment. These utilities work alongside the navigation, grid, and backdrop components.
Flex Direction Utilities
The flex direction utilities (Figure 1) create the flex container. They define the main axis: row or column, along with direction: normal or reverse. Further, they set the flex-wrap property to wrap.
1
2
3
1
2
3
1
2
3
1
2
3
<div class="flex-row">...</div>
<div class="flex-row-reverse">...</div>
<div class="flex-column">...</div>
<div class="flex-column-reverse">...</div>
Need a flex row that doesn't wrap? Replace .flex-row with .display-flex (from the display utilities).
Breakpoint Modifiers
Flex direction utilities accept breakpoint modifiers.
With the HTML in Figure 2, the flex container starts with the column direction. It then changes to the row direction at the large breakpoint.
1
2
3
<!-- With breakpoint modifiers -->
<div class="flex-column π flex-row--lg">...</div>
Flex Grow Utilities
The Flex grow utilities set the grow factor of a flex item along the flex container's main axis. The default grow value of a flex item is 0.
<div class="flex-grow-1">...</div>
<div class="flex-grow-0">...</div>
With .flex-grow-1, applied to a flex item, it will grow to fill any available space.
Flex Item (grow)
Flex Item
<div class="display-flex subtle-fill-1">
<div class="padding-x-3 padding-y-2 border π flex-grow-1">
<p>Flex Item</p>
</div>
<div class="padding-x-3 padding-y-2 border">
<p>Flex Item</p>
</div>
</div>
Flex Shrink Utilities
The Flex shrink utilities (e.g., .flex-shrink-{x}) set the shrink factor of a flex item, where x equals 0, 1, or 2.These three decimals represent the amount which the flex item shrinks.
<div class="flex-shrink-0">...</div>
<div class="flex-shrink-1">...</div>
<div class="flex-shrink-2">...</div>
With a flex shrink value of 0, a flex item will not shrink as it's flex container gets smaller. With a shrink value of 1, the flex item will shrink, but no smaller than itβs content. Finally, a flex item with a flex shrink value of 2 will shrink smaller than itβs content.
With the examples below, .flex-shrink-1 applied to the first flex item allows it to shrink along it's main axis.
Flex Item (Shrink 2)
Flex Item
<div class="display-flex">
<div class="padding-x-3 padding-y-2 border π flex-shrink-1">
<p>Flex Shrink</p>
</div>
<div class="padding-x-3 width-100 padding-y-2 border">
<p>2</p>
</div>
</div>
Justify Content Utilites
The justify content utilites (Figure 3) align items along the main-axis of their flex container.
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
<div class="flex-row π justify-content-start">...</div>
<div class="flex-row π justify-content-end">...</div>
<div class="flex-row π justify-content-center">...</div>
<div class="flex-row π justify-content-between">...</div>
<div class="flex-row π justify-content-around">...</div>
<div class="flex-row π justify-content-evenly">...</div>
Breakpoint Modifiers
Justify content utilities accept breakpoint modifiers.
With the HTML in Figure 8, the flex container changes it's justification to end at the large breakpoint.
1
2
3
<!-- With breakpoint modifiers -->
<div class="flex-row justify-content-end--lg π">...</div>
Align Content Utilites
The align content utilites distribute the space between and around items along the flex container's cross-axis.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
<div class="flex-row π align-content-start">...</div>
<div class="flex-row π align-content-end">...</div>
<div class="flex-row π align-content-center">...</div>
<div class="flex-row π align-content-between">...</div>
<div class="flex-row π align-content-around">...</div>
<div class="flex-row π align-content-evenly">...</div>
<div class="flex-row π align-content-stretch">...</div>
Breakpoint Modifiers
Align content utilities accept breakpoint modifiers.
With the HTML in Figure 10, the flex container starts its alignment with start then changes to end at the large breakpoint.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
<!-- With breakpoint modifiers -->
<div class="flex-row justify-content-end--lg π">...</div>