Flex display property provides simpler and more flexible way to lay out, align and distribute space among items in a container.
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.
.flex-{breakpoint}
or .flex-inline-{breakpoint}
sets a flex container, given breakpoint or wider.
<div class="row flex-xs">
<div class="col-xs-4">Column box</div>
</div>
.flex-{breakpoint}-reverse
sets the direction flex items from right to left.
<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>
.flex-{breakpoint}-start
is the default property value.
<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.
<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.
<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.
<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.
<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>
.flex-{breakpoint}-top
cross-start margin edge of the items is placed on the cross-start line.
<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.
<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.
<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).
<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>
.flex-{breakpoint}-justified
<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>
.flex-{breakpoint}-item-top
<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
<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
<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
<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
<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
<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>