Design

Flex

Flex can be used to align items easily and efficiently. The following classes can be used to align items inside a flex parent.

NOTE: These classes can be appended with breakpoint modifiers to allow different alignment/justification on different screen sizes.

Justify Between

Flex Item
Flex Item 
  
  <div class="flex-row flex-justify-between">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>

Justify Around

Flex Item
Flex Item 
  
  <div class="flex-row flex-justify-around">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>

Justify Start

Flex Item
Flex Item 
  
  <div class="flex-row flex-justify-start">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>

Justify End

Flex Item
Flex Item 
  
  <div class="flex-row flex-justify-end">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>

Align Center

Flex Item
Flex Item 
  
  <div class="flex-col flex-align-center">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>

Align Start

Flex Item
Flex Item 
  
  <div class="flex-col flex-align-start">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>

Align End

Flex Item
Flex Item 
  
  <div class="flex-col flex-align-end">
    <div>
      Flex Item
    </div>
    <div>
      Flex Item
    </div>
  </div>