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