Flexbox
Last updated
Last updated
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.
u-hflex-{xaxis}-{yaxis} classes for a horizontal flexboxu-vflex-{xaxis}-{yaxis} classes for a vertical flexboxSearch 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.
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.
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.
When wrapping is enabled, the row alignment will automatically match the main alignment to speed up our workflow even further.
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.
