Flexbox

Flexbox is one of the most used styles used in a design, and creating a flexbox layout usually adds multiple lines of new css to our site. This is one of the areas where using utilities can have the biggest impact on cleaner site code.

Use u-hflex-{xaxis}-{yaxis} classes for a horizontal flexbox

Use u-vflex-{xaxis}-{yaxis} classes for a vertical flexbox

Quick Find

Search the first letters to quickly get the right class. This is example is a vertical flexbox aligned to left on the x-axis and center on the y-axis.

Rename the class to change the style

In this example, renaming from bottom to center will change the flex alignment for every .hero_layout while keeping any overrides like the gap in place.

Flex wrapping

All flex utilities are set to not wrap by default. We can override that by applying a .u-hflex-wrap or .u-vflex-wrap class

Or by clicking the wrap button which adds one extra line to our css.

Row Alignment

When wrapping is enabled, the row alignment will automatically match the main alignment to speed up our workflow even further.

Overriding the flex across breakpoints

If a different flex direction or alignment is needed on mobile, it is recommended to use the utility for the desktop style and then override manually for the mobile version. This will still create less code than applying the styles manually on both breakpoints.