Flex containers

Flex containers

A set of classes to provide an efficient way to lay out, align, and distribute space between items in a container, even when its size is unknown and/or dynamic.

Containers

Direction and wrap

The direction and wrap are set using .flex-row and .flex-col which by default are set to nowrap. Use the modifier class .wrap and .wrap-** to allow element wrap on specific media queries.

.flex-row

flex-wrap: nowrap
Element 1
Element 2
Element 3
Element 4
flex-wrap: wrap
Element 1
Element 2
Element 3
Element 4

.flex-col

Currently there's no support for allowing flex-wrap on a container with flex-direction: column
Element 1
Element 2
Element 3
Element 4
<div class="flex-row">
  <div class="col-md-4">Element 1</div>
  <div class="col-md-4">Element 2</div>
  <div class="col-md-4">Element 3</div>
  <div class="col-md-4">Element 4</div>
</div>
<div class="flex-row wrap">
  <div class="col-md-4">Element 1</div>
  <div class="col-md-4">Element 2</div>
  <div class="col-md-4">Element 3</div>
  <div class="col-md-4">Element 4</div>
</div>
<div class="flex-col">
  <div class="col-md-4">Element 1</div>
  <div class="col-md-4">Element 2</div>
  <div class="col-md-4">Element 3</div>
  <div class="col-md-4">Element 4</div>
</div>

Alignment along the main axis

To change the alignment along the main axis use the modifier classes .flex-start, .flex-center, .flex-end, .flex-around and .flex-between.

.flex-row

.flex-start
Element 1
Element 2
Element 3
.flex-center
Element 1
Element 2
Element 3
.flex-end
Element 1
Element 2
Element 3
.flex-around
Element 1
Element 2
Element 3
.flex-between
Element 1
Element 2
Element 3

.flex-col

.flex-start
Element 1
Element 2
Element 3
.flex-center
Element 1
Element 2
Element 3
.flex-end
Element 1
Element 2
Element 3
.flex-around
Element 1
Element 2
Element 3
.flex-between
Element 1
Element 2
Element 3
<div class="flex-row flex-start">
  <div class="col-md-3">Element 1</div>
  <div class="col-md-3">Element 2</div>
  <div class="col-md-3">Element 3</div>
</div>
<div class="flex-row flex-center">
  <div class="col-md-3">Element 1</div>
  <div class="col-md-3">Element 2</div>
  <div class="col-md-3">Element 3</div>
</div>
<div class="flex-row flex-end">
  <div class="col-md-3">Element 1</div>
  <div class="col-md-3">Element 2</div>
  <div class="col-md-3">Element 3</div>
</div>
<div class="flex-row flex-around">
  <div class="col-md-3">Element 1</div>
  <div class="col-md-3">Element 2</div>
  <div class="col-md-3">Element 3</div>
</div>
<div class="flex-row flex-between">
  <div class="col-md-3">Element 1</div>
  <div class="col-md-3">Element 2</div>
  <div class="col-md-3">Element 3</div>
</div>

Items

Alignment along the cross axis

The default option for laid out items along the cross axis on the current line is center. Use the modifier classes .flex-item-v-start, .flex-item-v-center, .flex-item-v-end, .flex-item-v-stretch, .flex-item-v-baseline and .flex-item-v-auto to override.

flex-item-v-start
flex-item-v-center
flex-item-v-end
flex-item-v-stretch
flex-item-v-baseline
flex-item-v-auto
<div class="flex-row">
  <div class="col-md-3 flex-item-v-start">flex-item-v-start</div>
  <div class="col-md-3 flex-item-v-center">flex-item-v-center</div>
  <div class="col-md-3 flex-item-v-end">flex-item-v-end</div>
  <div class="col-md-3 flex-item-v-stretch">flex-item-v-stretch</div>
  <div class="col-md-3 flex-item-v-baseline">flex-item-v-baseline</div>
  <div class="col-md-3 flex-item-v-auto">flex-item-v-auto</div>
</div>

Sizing and alignment

Use the col-**-** as you would within any .row container to set item's width.

Inside a flex container, float and vertical-align won't have any effect. To align elements use the modifier classes .flex-item-left and .flex-item-right for horizontal aligment, or .flex-item-top and .flex-item-bottom for vertical alignment.

col-md-4 flex-item-left
col-md-4 flex-item-right

col-md-4 flex-item-top
col-md-4 flex-item-bottom
<div class="flex-row wrap">
    <div class="col-md-4 flex-item-left">col-md-4 flex-item-left</div>
    <div class="col-md-4 flex-item-right">col-md-4 flex-item-right</div>
  </div>
  <br>
  <div class="flex-col wrap">
    <div class="col-md-4 flex-item-left flex-item-top">col-md-4 flex-item-top</div>
    <div class="col-md-4 flex-item-right flex-item-bottom">col-md-4  flex-item-bottom</div>
  </div>