Flex • Natura11y
Green frog on tree branch

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>
    
Figure 1

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>
    
Figure 2

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>
    
Figure 3

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">
            <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>
    
Figure 4

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>
    
Figure 5

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>
    
Figure 6

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>
    
Figure 7

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>
    
Figure 8

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>
    
Figure 9

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>
    
Figure 10