Flexbox

Flexbox allows you to easily make changes to elements such as centering. The flexbox CSS is not very well developed quite yet, mostly being limited to centering items or setting basic flexbox attributes via classes.

While this is a good start, it'd be nice to have classes that can handle more. Here are the classes that are presently available.

Class

Function

.flex

Sets display: flex

.flex-wrap

Wraps content with flex

.flex-nowrap

Prevents content from wrapping with flex

.flex-column

Places items into a column

.flex-row

Places items into a row

.flex-center

Centers content with flex

.flex-start

Places items at start of flex container

.flex-end

Places items at end of flex container

.flex-space-between

Evenly spaces items along the main axis

.flex-space-around

Evenly spaces items along the cross axis