Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

To create a flexbox container and to transform direct children into flex items, user the .flex class

To create an inline flexbox container, use the .flex-inline class

Horizontal Direction

Use .flex-row to display the flex items horizontally (side by side). This id default.

Tip: Use .flex-row-reverse to right-align the horizontal direction:

Justify Content

Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, betwwen or around:

.justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

Grow

Use .flex-grow on flex items to take up the rest of the space. In the example below, the first two flex items take up their necessary space, white the last item takes up the rest of the available space:

Order

Use .flex-grow on flex items to take up the rest of the space. In the example below, the first two flex items take up their necessary space, white the last item takes up the rest of the available space:

Auto Margins

Easily add auto margins to flex items width .mr-auto (push items to the right), or by using .ml-auto (push items to the left)

Wrap

Control how flex items wrap in a flex container width .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse

.flex-nowrap

.flex-wrap

.flex-wrap-reverse

Align Content

Control the vertical alignment of gathered flex items with the .align-content-* classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-streth

.align-content-start

.align-content-end

.align-content-center

.align-content-between

.align-content-around

.align-content-stretch

Align Items

Control the vertical alignment of single rows of flex items with the .align-items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch(default)

.align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch

Align Self

Control the vertical alignment of a specified flex item width the .align-self-* classes. Valid classes are .align-self-start, align-selft-end, .align-selft-center, .align-selft-baseline, and .align-self-stretch (default)