Flex

Below are a set of flexbox utilities to add responsiveness and flexibility to your layouts. The design system flexbox utilities provide a set of CSS classes you can use to lay out items in a container. These utilities take advantage of CSS flexbox and are designed to be used when fine-tuning the layout of items at the individual component level.

For further information on using flexbox, CSS Tricks provides a comprehensive guide.

Flex Parent Utilities

The following flex utilities are available to apply to the parent element to control the order and arrangement child elements.

Class Name	CSS Value	Behavior
.flex	display: flex;	Needs to be set on parent element
.flex-inline	display: inline-flex	Displays the flex container inline with another element
.flex-row	flex-direction: row;	Displays flex children in a row
.flex-row-reverse	flex-direction: row-reverse;	Displays flex children in a row in reverse order
.flex-column	flex-direction: column;	Displays flex children in a column
.flex-column-reverse	flex-direction: column-reverse;	Displays flex children in a column in reverse order
.flex-wrap	flex-wrap: wrap;	Allows flex children to wrap to additional rows
.flex-no-wrap	flex-wrap: nowrap	Prevents flex children from wrapping
.flex-wrap-reverse	flex-wrap: wrap-reverse	Wraps flex children in reverse order

Flex Alignment Utilities

These flex utilities are also applied to the parent element and control the alignment of child elements.

Justify Content

The following utilities use the justify-content property.

Class Name	CSS Value	Behavior
.flex-justify-start	justify-content: flex-start;	In row: Children aligned left. In column: Children aligned to top
.flex-justify-end	justify-content: flex-end;	In row: Children aligned right. In column: Children align to bottom.
.flex-justify-center	justify-content: center;	Children aligned to the center
.flex-justify-space-between	justify-content: space-between;	Space is given between children in column or row
.flex-justify-space-around	justify-content: space-around;	Equal amount of space on either side of children in column or row
.flex-justify-space-evenly	justify-content: space-evenly;	Children are spaced equally apart in column or row

Align Items

Class Name	CSS Value	Behavior
.flex-items-start	align-items: flex-start;	In row: Children aligned top. In column: Children aligned left
.flex-items-end	align-items: flex-end;	In row: Children aligned bottom. In column: Children aligned right.
.flex-items-center	align-items: center;	Children aligned to the center
.flex-items-stretch	align-items: stretch	Children are stretched to fill parent container
.flex-items-baseline	align-items: baseline	Children are positioned at the baseline of the parent container

Align Content

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

Note: There must be multiple lines of items for this property to have any effect.

Class Name	CSS Value	Behavior
.flex-content-start	align-content: flex-start;	Flex lines are packed toward the start of the flex container
.flex-content-end	align-content: flex-end;	Flex lines are packed toward the end of the flex container
.flex-content-center	align-content: center;	Flex lines are packed toward the center of the flex container
.flex-content-stretch	align-content: stretch;	Default value. Flex lines stretch to take up the remaining space

Flex Child Utilities

The following utilities can be added to a flex child to control individual alignment or size.

Flex Grow and Shrink

Flex-grow defines the ability for a flex item to grow if necessary. It accepts a unit-less value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container.

Flex-shrink determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row. A flex-shrink of 0 will prevent a flex child from shrinking in relation to a sibling.

Class Name	CSS Value
.flex-grow-1	flex-grow: 1;
.flex-grow-0	flex-grow: 0;
.flex-shrink-1	flex-shrink: 1;
.flex-shrink-0	flex-shrink: 0;

Align Self

Align-self determines how a child can align itself in a flex container.

Class Name	CSS Value
.flex-self-start	align-self: flex-start
.flex-self-end	align-self: flex-end
.flex-self-center	align-self: center
.flex-self-stretch	align-self: stretch
.flex-self-baseline	align-self: baseline

Responsive Flex Utilities

The Digital Design System provides responsive version of all the above class names. Each class name can be made responsive by simply adding a design system breakpoint value to the end of the class name. For example, .flex-md will add display: flex to a parent container on viewports 768px and up.

In the below example, .flex-md is applied to the parent container and .flex-grow-1-md to the child items. This will apply display: flex to the parent and evenly distribute the children horizontally on viewports md and up. On smaller viewports this layout will collapse to a stacked column.

<div class="flex-md background-blue-primary-20 padding-2">
    <div class="text-white background-blue-primary padding-2 margin-2 flex-grow-1-md">
        Flex Item
    </div>
    <div class="text-white background-blue-primary padding-2 margin-2 flex-grow-1-md">
        Flex Item
    </div>
    <div class="text-white background-blue-primary padding-2 margin-2 flex-grow-1-md">
        Flex Item
    </div>
</div>