Flexbox

Utilize the power of Flexbox to create a wide range of layouts.

This component uses Flexbox, which, although a relatively new CSS technology, is extremely powerful for creating page structure and document layouts.

To learn more about Flexbox, Chris Coyier published a few great articles on his website, CSS Tricks.


Usage

To apply this component, just add the .flex class to a <div> element. This will create the flex container. By default, all flex items will be aligned to the left and equally matched in height and width.

NOTE No style is applied to elements using the Flexbox component. In our examples, we include classes from the Panel component and additional style applied to highlight the wrapper and the child elements.

Usage

  • Class Description
    .flex Applies display: flex; to an element. Along with .flex-inline, the immediate children of this class are given a flex value of flex: 0 1 auto;.
    .flex-inline Applies display: inline-flex; to an element

    Modifiers

    Class Description
    .flex-top Vertically aligns all children of the component to the top of the element.
    .flex-middle Vertically aligns all children of the component to the middle of the element.
    .flex-bottom Vertically aligns all children of the component to the bottom of the element.
    .flex-left Horizontally aligns all children of the component to the beginning (left side) of the element.
    .flex-center Horizontally aligns all children of the component to the center of the element.
    .flex-right Horizontally aligns all children of the component to the end (right side) of the element.
    .flex-space-around Child items are spaced evenly within the element, with spacing applied before and after the element.
    .flex-space-between Child items are spaced evenly in the element and all space is removed before the first element and after the last element.
    .flex-row Items are aligned horizontally in a row.
    .flex-row-reverse Items are aligned horizontally in a row, but displayed in the reverse order in which they are interpreted in the DOM.
    .flex-column Items are aligned vertically in a column.
    .flex-column-reverse Items are aligned vertically in a clumn, but displayed in the reverse order in which they are interpreted in the DOM.
    .flex-wrap Items can wrap onto a new line if necessary (by default, flex items do no wrap).
    .flex-wrap-reverse Items can wrap onto a new line if necessary, but in the reverse order in which they are interpreted in the DOM.

    Sub Objects

    Class Description
    .order-first When added to an immediate child of a .flex or .flex-inline element, this class displays the element first in the order.
    .order-last Displays the order last in the .flex or .flex-inline order.
    .item-grow Applies the css flex: 1 0 100%; to the element.
    .item-shrink Applies the css flex: 0 1 auto; - the default flex value - to the element.
  • .flex

    Item 1
    Item 2
    Item 3

    .flex-inline

    Item 1
    Item 2
    Item 3

    .flex .flex-top

    Item 1
    Item 2
    Item 3

    .flex .flex-middle

    Item 1
    Item 2
    Item 3

    .flex .flex-bottom

    Item 1
    Item 2
    Item 3

    .flex .flex-left

    Item 1
    Item 2
    Item 3

    .flex .flex-center

    Item 1
    Item 2
    Item 3

    .flex .flex-right

    Item 1
    Item 2
    Item 3

    .flex .flex-space-around

    Item 1
    Item 2
    Item 3

    .flex .flex-space-between

    Item 1
    Item 2
    Item 3

    .flex .flex-row

    Item 1
    Item 2
    Item 3

    .flex .flex-row-reverse

    Item 1
    Item 2
    Item 3

    .flex .flex-column

    Item 1
    Item 2
    Item 3

    .flex .flex-column-reverse

    Item 1
    Item 2
    Item 3
  • <div class="flex">
    	...
    </div>
    
    <div class="flex-inline">
    	...
    </div>
    
    <div class="flex flex-top">
    	...
    </div>
    
    <div class="flex flex-middle">
    	...
    </div>
    
    <div class="flex flex-bottom">
    	...
    </div>
    
    <div class="flex flex-left">
    	...
    </div>
    
    <div class="flex flex-center">
    	...
    </div>
    
    <div class="flex flex-right">
    	...
    </div>
    
    <div class="flex flex-space-around">
    	...
    </div>
    
    <div class="flex flex-space-between">
    	...
    </div>
    
    <div class="flex flex-row">
    	...
    </div>
    
    <div class="flex flex-row-reverse">
    	...
    </div>
    
    <div class="flex flex-column">
    	...
    </div>
    
    <div class="flex flex-column-reverse">
    	...
    </div>
    

Modifiers

You can add a number of different classes to modify the flex behavior.

Alignment Modifiers

Usage

  • .flex .flex-top

    Item 1
    Item 2
    Item 3

    .flex .flex-middle

    Item 1
    Item 2
    Item 3

    .flex .flex-bottom

    Item 1
    Item 2
    Item 3

    .flex .flex-left

    Item 1
    Item 2
    Item 3

    .flex .flex-center

    Item 1
    Item 2
    Item 3

    .flex .flex-right

    Item 1
    Item 2
    Item 3
  • <div class="flex flex-top">
    	...
    </div>
    
    <div class="flex flex-middle">
    	...
    </div>
    
    <div class="flex flex-bottom">
    	...
    </div>
    
    <div class="flex flex-left">
    	...
    </div>
    
    <div class="flex flex-center">
    	...
    </div>
    
    <div class="flex flex-right">
    	...
    </div>
    

Layout Modifiers

Usage

  • .flex .flex-row

    Item 1
    Item 2
    Item 3

    .flex .flex-row-reverse

    Item 1
    Item 2
    Item 3

    .flex .flex-column

    Item 1
    Item 2
    Item 3

    .flex .flex-column-reverse

    Item 1
    Item 2
    Item 3
  • <div class="flex flex-row">
    	...
    </div>
    
    <div class="flex flex-row-reverse">
    	...
    </div>
    
    <div class="flex flex-column">
    	...
    </div>
    
    <div class="flex flex-column-reverse">
    	...
    </div>
    

Spacing Modifiers

Usage

  • .flex .flex-space-around

    Item 1
    Item 2
    Item 3

    .flex .flex-space-between

    Item 1
    Item 2
    Item 3
  • <div class="flex flex-space-around">
    	...
    </div>
    
    <div class="flex flex-space-between">
    	...
    </div>
    

Wrap Modifiers

Usage

  • .flex .flex-wrap

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8

    .flex .flex-wrap-reverse

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
  • <div class="flex flex-wrap">
    	...
    </div>
    
    <div class="flex flex-wrap-reverse">
    	...
    </div>
    

Sub Objects

Each sub-object of the Flex component also has responsive modifiers attached to them like elements of the grid or utility components. For example, adding a *-small suffix to any sub-object class means that the modification will only be applied on viewports greater than 480px.

Item Order

Usage

  • .item
    .item
    .flex-order-first
    .flex-order-last
    .item
    .item
  • <div class="flex">
    	<div class="flex-order-last">...</div>
    	<div class="item">...</div>
    	<div class="item">...</div>
    </div>
    

Flex Grow/Shrink Modifiers

Usage

  • .item
    .item
    .flex-item-grow
    .item
    .item
    .flex-item-shrink
  • <div class="flex">
    	<div class="item">...</div>
    	<div class="item">...</div>
    	<div class="flex-item-shrink">...</div>
    </div>