Flexible Grid Attiribute

FlexibleGrid works very similarly to the standard float grid, but includes a number of different features only possible with flex, like horizontal and vertical alignment, auto sizing, and easier source ordering.

All example : http://flexible-grid.com

Flex Container

Apply display utilities to create a flexgrid container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Display: flex

flex container

display:flex

<div class="row d-flex">                 
   <div class="column-4">flex-item-1</div>                 
   <div class="column-4">flex-item-2</div>                 
   <div class="column-4">flex-item-3</div>             
</div>

Display: inline-flex

inline flex container

display:inline-flex

<div class="row d-inline-flex">                 
   <div class="column-4">flex-item-1</div>                 
   <div class="column-4">flex-item-2</div>                 
   <div class="column-4">flex-item-3</div>             
</div>

Flex Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value

flex-direction: row

items aligned in the horizontal direction

flex-direction:row

<div class="row d-flex flex-d-row">                 
   <div class="column-4">flex-item-1</div>                 
   <div class="column-4">flex-item-2</div>                 
   <div class="column-4">flex-item-3</div>             
</div>

flex-direction: row-reverse

items aligned in the horizontal reverse direction

flex-direction:row-reverse

<div class="row d-flex flex-d-row-reverse">                 
   <div class="column-4">flex-item-1</div>                 
   <div class="column-4">flex-item-2</div>                 
   <div class="column-4">flex-item-3</div>             
</div>

flex-direction: column

items aligned in the vertical direction

flex-direction:column

<div class="row d-flex flex-d-column">                 
   <div class="column-4">flex-item-1</div>                 
   <div class="column-4">flex-item-2</div>                 
   <div class="column-4">flex-item-3</div>             
</div>

flex-direction: column-reverse

items aligned in the vertical reverse direction

flex-direction:column-reverse

<div class="row d-flex flex-d-column-reverse">                 
   <div class="column-4">flex-item-1</div>                 
   <div class="column-4">flex-item-2</div>                 
   <div class="column-4">flex-item-3</div>             
</div>

Flex Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

flex-wrap: nowrap

nowrap example

flex-wrap:nowrap

<div class="row d-flex flex-nowrap">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>             
</div>

flex-wrap: wrap

wrap example

flex-wrap:wrap

<div class="row d-flex flex-wrap">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>           
</div>

flex-wrap: wrap-reverse

wrap reverse example

flex-wrap:wrap-reverse

<div class="row d-flex flex-wrap-reverse">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>           
</div>

Justify Content

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

justify-content: flex-start

Aligned to the left

justify-content:flex-start

<div class="row d-flex justify-content-start">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

justify-content: flex-end

Aligned to the right

justify-content:flex-end

<div class="row d-flex justify-content-end">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

justify-content: center

Aligned to the middle

justify-content:center

<div class="row d-flex justify-content-center">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

justify-content: baseline

Aligned to the left

justify-content:baseline

<div class="row d-flex justify-content-baseline">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

justify-content: space-around

Aligned to the space around

justify-content:space-around

<div class="row d-flex justify-content-around">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

justify-content: space-between

Aligned to the edges

justify-content:space-between

<div class="row d-flex justify-content-between">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

Align Items

Columns in a flex grid can be aligned across the horizontal or vertical axis of their parent row. Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

align-items: flex-start

These columns align to the top

align-items:flex-start

<div class="row d-flex align-items-start">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-items: flex-end

These columns align to the bottom

align-items-flex-end

<div class="row d-flex align-items-end">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-items: center

These columns align to the middle

align-items:center

<div class="row d-flex align-items-center">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-items: baseline

These columns align to the baseline

align-items:baseline

<div class="row d-flex align-items-baseline">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-items: stretch

These columns align to the stretch

align-items:stretch

<div class="row d-flex align-items-stretch">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

Align Self

Vertical Alignment of child columns (individually) Similar alignment classes can also be applied to individual columns.

align-self: flex-start

These column align to the top

align-selft:flex-start

<div class="row d-flex">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3 align-self-start">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-self: flex-end

These column align to the bottom

align-selft:flex-end

<div class="row d-flex">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3 align-self-end">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-self: center

These column align to the middle

align-self:center

<div class="row d-flex">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3 align-self-center">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-self: baseline

These column align to the baseline

align-self:baseline

<div class="row d-flex">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3 align-self-baseline">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

align-self: stretch

These column align to the top stretch

<div class="row d-flex">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3 align-self-stretch">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>         
</div>

Align Content

Use align-content utilities on flexgrid containers to align flex items together on the cross axis. This property has no affect on single rows of flex items.

align-content: flex-start

Aligned to the top

align-content:flex-start

<div class="row d-flex align-content-start">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>       
</div>

align-content: flex-end

Aligned to the bottom

align-content:flex-end

<div class="row d-flex align-content-end">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>       
</div>

align-content: center

Aligned to the center

align-content:center

<div class="row d-flex align-content-center">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>       
</div>

align-content: space-between

Aligned to the edges

align-content:space-between

<div class="row d-flex align-content-between">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>       
</div>

align-content: space-around

Aligned to the space around

align-content:around

<div class="row d-flex align-content-around">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>  
   <div class="column-3">flex-item-4</div>
   <div class="column-3">flex-item-5</div>
   <div class="column-3">flex-item-6</div>
   <div class="column-3">flex-item-7</div>       
</div>

Flex Margin Auto

Flexgrid can do some pretty awesome things when you mix flex alignments with auto margins.

margin-left: auto

These row align to the “margin-left”

margin-left:auto

<div class="row d-flex align-content-around">                 
   <div class="column-3">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3 flex-ml-auto">flex-item-3</div>      
</div>

margin-right: auto

These row align to the “margin-right”

margin-right:auto

<div class="row d-flex align-content-around">                 
   <div class="column-3 flex-mr-auto">flex-item-1</div>                 
   <div class="column-3">flex-item-2</div>                 
   <div class="column-3">flex-item-3</div>      
</div>

order

These row align to the “margin-right”

order: -1/0/1/2/3/4/5/6/7/8/9/10

<div class="row d-flex align-content-around">                 
   <div class="column-3 flex-order-unordered">flex-item-1</div>                 
   <div class="column-3 flex-order-last">flex-item-2</div>                 
   <div class="column-3 flex-order-first">flex-item-3</div>      
</div>