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
u-hflex-{xaxis}-{yaxis}
classes for a horizontal flexboxUse u-vflex-{xaxis}-{yaxis}
classes for a vertical flexbox
u-vflex-{xaxis}-{yaxis}
classes for a vertical flexboxQuick 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.
Last updated