Flexbox

Flex display property provides simpler and more flexible way to lay out, align and distribute space among items in a container.

Flexbox basics

Flexbox is a whole module and not a single property. Some of them are meant to be set on the container, parent element known as flex container, whereas the others are meant to be set on the children, said flex items.

Note that float, clear and vertical-align have no effect on a flex item.

Flexbox basics

Display flex

.flex-{breakpoint} or .flex-inline-{breakpoint} sets a flex container, given breakpoint or wider.

Column box
<div class="row flex-xs">
  <div class="col-xs-4">Column box</div> 
</div>

Reverse direction

.flex-{breakpoint}-reverse sets the direction flex items from right to left.

Box 1
Box 2
Box 3
<div class="row flex-xs flex-xs-reverse">
  <div class="col-xs-4">Box 1</div> 
  <div class="col-xs-4">Box 2</div>
  <div class="col-xs-4">Box 3</div>
</div>

Justify content along main axis

.flex-{breakpoint}-start is the default property value.

Column box
<div class="row flex-xs flex-xs-start">
  <div class="col-xs-4">Column box</div> 
</div>

.flex-{breakpoint}-end items are packed toward to end line.

Column box
<div class="row flex-xs flex-xs-end">
  <div class="col-xs-4">Column box</div> 
</div>

.flex-{breakpoint}-center items are centered along the line.

Column box
<div class="row flex-xs flex-xs-center">
  <div class="col-xs-4">Column box</div> 
</div>

.flex-{breakpoint}-between items are evenly distributed in the line.

Box 1
Box 2
Box 3
<div class="row flex-xs flex-xs-between">
  <div class="col-xs-2">Box 1</div> 
  <div class="col-xs-3">Box 2</div>
  <div class="col-xs-2">Box 3</div>
</div>

.flex-{breakpoint}-around items are evenly distributed in the line with equal space around them.

Box 1
Box 2
Box 3
<div class="row flex-xs flex-xs-around">
  <div class="col-xs-2">Box 1</div> 
  <div class="col-xs-3">Box 2</div>
  <div class="col-xs-2">Box 3</div>
</div>

Align items along cross axis

.flex-{breakpoint}-top cross-start margin edge of the items is placed on the cross-start line.

Box 1
Box 2
Box 3
<div class="row flex-xs flex-xs-top">
  <div class="col-xs-4 py-4">Box 1</div> 
  <div class="col-xs-4 py-3">Box 2</div>
  <div class="col-xs-4">Box 3</div>
</div>

.flex-{breakpoint}-bottom cross-end margin edge of the items is placed on the cross-end line.

Box 1
Box 2
Box 3
<div class="row flex-xs flex-xs-bottom">
  <div class="col-xs-4">Box 1</div> 
  <div class="col-xs-4 py-3">Box 2</div>
  <div class="col-xs-4 py-4">Box 3</div>
</div>

.flex-{breakpoint}-middle items are centered in the cross-axis.

Box 1
Box 2
Box 3
Box 4
<div class="row flex-xs flex-xs-middle">
  <div class="col-xs-3 py-4">Box 1</div> 
  <div class="col-xs-3">Box 2</div>
  <div class="col-xs-3 py-3">Box 3</div>
  <div class="col-xs-3">Box 4</div>
</div>

.flex-{breakpoint}-stretch: stretch to fill the container (still respect min-width/max-width).

Box 1
Box 2
Box 3
<div class="row flex-xs flex-xs-stretch">
  <div class="col-xs-4">Box 1</div> 
  <div class="col-xs-4 py-3">Box 2</div>
  <div class="col-xs-4 py-4">Box 3</div>
</div>

Justify content

.flex-{breakpoint}-justified

Box 1
Box 2
Box 3
<div class="flex-xs flex-xs-justified">
  <div class="flex-item">Box 1</div> 
  <div class="flex-item mx-1">Box 2</div>
  <div class="flex-item">Box 3</div>
</div>

Overridden flex items alignment

.flex-{breakpoint}-item-top

Box 1
Box 2
Align self
Box 3
<div class="row flex-xs flex-xs-bottom">
  <div class="col-xs-3 py-4">Box 1</div> 
  <div class="col-xs-3 py-3">Box 2</div>
  <div class="col-xs-3 flex-xs-item-top">Align self</div>
  <div class="col-xs-3">Box 3</div>
</div>

.flex-{breakpoint}-item-bottom

Box 1
Box 2
Align self
Box 3
<div class="row flex-xs flex-xs-top">
  <div class="col-xs-3 py-4">Box 1</div> 
  <div class="col-xs-3 py-3">Box 2</div>
  <div class="col-xs-3 flex-xs-item-bottom">Align self</div>
  <div class="col-xs-3">Box 3</div>
</div>

.flex-{breakpoint}-item-middle

Box 1
Box 2
Align self
Box 3
<div class="row flex-xs flex-xs-top">
  <div class="col-xs-3 py-4">Box 1</div> 
  <div class="col-xs-3 py-3">Box 2</div>
  <div class="col-xs-3 flex-xs-item-middle">Align self</div>
  <div class="col-xs-3">Box 3</div>
</div>

.flex-{breakpoint}-item-stretch

Box 1
Box 2
Align self
Box 3
<div class="row flex-xs flex-xs-top">
  <div class="col-xs-3 py-4">Box 1</div> 
  <div class="col-xs-3 py-3">Box 2</div>
  <div class="col-xs-3 flex-xs-item-stretch">Align self</div>
  <div class="col-xs-3">Box 3</div>
</div>

.flex-{breakpoint}-item-start

Box 1
Box 2
Box 3
Box 4
<div class="row flex-xs">
  <div class="col-xs-3">Box 1</div> 
  <div class="col-xs-3">Box 2</div>
  <div class="col-xs-3">Box 3</div>
  <div class="col-xs-3 flex-xs-item-start">Box 4</div>
</div>

.flex-{breakpoint}-item-end

Box 1
Box 2
Box 3
Box 4
<div class="row flex-xs">
  <div class="col-xs-3 flex-xs-item-end">Box 1</div> 
  <div class="col-xs-3">Box 2</div>
  <div class="col-xs-3">Box 3</div>
  <div class="col-xs-3">Box 4</div>
</div>