Flex Helpers

Display Flex

Adding the .elr-flex class sets the container's display property to flex. Notice that by default elements inside a flex container don't wrap. Since the items have a minimum width of 300px they break out of their container. We'll fix this later.

Flex Item. Min Width 300px
Flex Item. Min Width 300px
Flex Item. Min Width 300px
Flex Item. Min Width 300px
            <div class="elr-flex"></div>
            
          

Flex Direction

Adding the .elr-flex-row class sets the container's children to appear along the x-axis. Since the min width was removed they no longer break out of their container but they also don't fill their container. We will address this later.

Flex Item.
Min Width 0px
Flex Item.
Min Width 0px
Flex Item.
Min Width 0px
Flex Item.
Min Width 0px
            <div class="elr-flex elr-flex-row"></div>
            
          

Adding the .elr-flex-row class sets the container's children to appear along the y-axis. They also don't fill their container. We will address this later.

Flex Item
Flex Item
Flex Item
Flex Item
            <div class="elr-flex elr-flex-column"></div>
            
          

One way to prevent children from breaking out of their flex box container is with the flex-wrap: wrap; rule. Adding the elr-flex-wrap class causes the elements to go on to another row instead of breaking out of their container.

Flex Item
Flex Item
Flex Item
Flex Item
            <div class="elr-flex elr-flex-wrap"></div>
            
          

Flex Sizing

In the above examples we see a little bit about the behavior of flex helper classes but they're not super flexible. This is where the sizing classes can help. These are the style rules that enable flexbox to replace a traditional grid system.

Adding .elr-flex-grow and .elr-flex-shrink allow the boxes to fill up all of the available space. When the window resizes the boxes will shrink along with their parent container.

Flex Item. Min Width 0px
Flex Item. Min Width 0px
Flex Item. Min Width 0px
Flex Item. Min Width 0px
            <div style="min-width: 0;" class="flex-item elr-flex-grow elr-flex-shrink" >Flex Item. Min Width 0px</div>
            
          

Flex Item. Min Width 0px
Flex Item. Min Width 0px
            <div style="min-width: 0;" class="flex-item elr-flex-1" >Flex Item. Min Width 0px</div>
<div style="min-width: 0;" class="flex-item elr-flex-2" >Flex Item. Min Width 0px</div>
            
          

Flex Item. Min Width 0px
Flex Item. Min Width 0px
            <div style="min-width: 0;" class="flex-item elr-flex-1" >Flex Item. Min Width 0px</div>
<div style="min-width: 0;" class="flex-item elr-flex-3" >Flex Item. Min Width 0px</div>
            
          

Flex Alignment Classes

display: flex; flex-direction: row; align-items: baseline;

Flex Item
Flex Item

display: flex; flex-direction: row; align-items: center;

Flex Item
Flex Item

display: flex; flex-direction: row; align-items: flex-start;

Flex Item
Flex Item

display: flex; flex-direction: row; align-items: flex-end;

Flex Item
Flex Item

display: flex; flex-direction: row; justify-content: center;

Flex Item
Flex Item

display: flex; flex-direction: row; justify-content: space-between;

Flex Item
Flex Item

display: flex; flex-direction: row; justify-content: space-around;

Flex Item
Flex Item

display: flex; flex-direction: row; justify-content: flex-start;

Flex Item
Flex Item

display: flex; flex-direction: row; justify-content: flex-end;

Flex Item
Flex Item

Flex Reorder

Use caution when reordering elements with flexbox as screen readers will be inconsistent with what's on the screen.

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 Item 1
Flex Item 2
Flex Item 3

Flex Column Helpers Demo

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 Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3