Flexbox

Flexbox

The included utilities are pretty sparse, but you can make most basic layouts using only the following classes: Create basic layouts using flexbox:

Source:

.flex { display: flex }
.flex-wrap { flex-wrap: wrap }
.flex-items-start { align-items: flex-start }
.flex-items-end { align-items: flex-end }
.flex-items-center { align-items: center }
.flex-items-baseline { align-items: baseline }
.flex-items-stretch { align-items: stretch }
.flex-justify-start { justify-content: flex-start }
.flex-justify-end { justify-content: flex-end }
.flex-justify-center { justify-content: center }
.flex-justify-between { justify-content: space-between }
.flex-justify-around { justify-content: space-around }
.flex-auto {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

API

.flex

You get the idea.

.flex-wrap

By default, children of a flex element do not wrap. If you want the children to reflow and stack, you need this class on the parent.

.flex-items-*

These classes define vertical alignment of children. .flex-items-start and .flex-items-center are used most often, for aligning to the top of the left-most child, and aligning all children to the middle, respectively.

.flex-justify-*

These classes define horizontal spacing. .flex-justify-start aligns to the left, and .flex-justify-end aligns to the right, for example. -between and -around are handy for creating gutters and grids, but aren't necessary if you use the Bootstrap method of negative margins on a .row element and horizontal padding on the children.

.flex-auto

This class simply allows a child of a flex element expand to fill the remaining space within its parent.