Flex | Build with Boba

Align your content with ease using this set of classes.

Tip

Don't forget to use these classes with the .display-flex and .display-inline-flex display utility classes.

Control how the browser handles the space between and around elements along the cross axis of their container when wrapping occurs.

Align Content
	`.align-content-left`	Elements are distributed from the start of the container.
	`.align-content-center`	Elements are distributed about the center of the container.
	`.align-content-right`	Elements are distributed from the end of the container.
	`.align-content-stretch`	Elements are stretched to fill the container.
	`.align-content-space-around`	Elements has the same amount of spacing on either side.
	`.align-content-space-between`	Elements are spaced evenly; the first and last element are flush to the container ends.
	`.align-content-space-evenly`	Elements have equal spacing around them.

Control how the browser handles the positioning of elements along the perpendicular axis of their container.

Align Items
	`.align-items-top`	Elements align themselves to the top of their container.
	`.align-items-middle`	Elements align themselves to the perpendicular center axis of their container.
	`.align-items-bottom`	Elements align themselves to the bottom of their container.

Override the align-items property for a specific element within a flex container to control how the browser handles the positioning of said element along the perpendicular axis of their container.

Align Self
	`.align-self-top`	Elements align themselves to the top of their container.
	`.align-self-middle`	Elements align themselves to the perpendicular center axis of their container.
	`.align-self-bottom`	Elements align themselves to the bottom of their container.

Control how the browser handles the space between and around elements along the main axis of their container.

Justify Content
	`.justify-content-left`	Elements are distributed from the start of the container.
	`.justify-content-center`	Elements are distributed about the center of the container.
	`.justify-content-right`	Elements are distributed from the end of the container.
	`.justify-content-stretch`	Elements are stretched to fill the container.
	`.justify-content-space-around`	Elements has the same amount of spacing on either side.
	`.justify-content-space-between`	Elements are spaced evenly; the first and last element are flush to the container ends.
	`.justify-content-space-evenly`	Elements have equal spacing around them.

Control how the browser places flex items within a flex container.

Flex Direction
	`.flex-row`	Elements are placed horizontally in chronological order.
	`.flex-row-reverse`	Elements are placed horizontally in reverse-chronological order.
	`.flex-column`	Elements are placed vertically in chronological order.
	`.flex-column-reverse`	Elements are placed vertically in reverse-chronological order.

Control if and how the browser wraps flex items within a flex container.

Flex Wrap
	`.flex-wrap`	Elements wrap onto new lines sequentially (i.e. top to bottom).
	`.flex-wrap-reverse`	Elements wrap onto new lines above the current line (i.e. bottom to top).
	`.flex-no-wrap`	Elements are forced into a single lined.