Photo: 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. They also 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? Add .flex-no-wrap to the flex container.
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 set whether a flex item is allowed to shrink along the flex container’s main axis.
<div class="flex-shrink-0">...</div> <div class="flex-shrink-1">...</div>With a flex shrink value of 0, a flex item will not shrink as its flex container gets smaller. With a shrink value of 1, the flex item will shrink, but no smaller than its content.
With the examples below, .flex-shrink-1 applied to the first flex item allows it to shrink along its main axis.
Flex Item (Shrink)
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 Utilities
The justify content utilities (Figure 7) 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 its justification to end at the large breakpoint.
1
2
3
<!-- With breakpoint modifiers -->
<div class="flex-row justify-content-end--lg">...</div>Align Content Utilities
The align content utilities 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 align-content-end--lg">...</div>
