Flexbox
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
The alignment variable modes allow us to adjust flexbox alignment and text alignment on all children from a single variable mode. This is perfect for child components that will be used across multiple sections and need to match the flex alignment of the section they're added in. It also allows us to easily switch the alignment of an entire section across breakpoints when needed without having to manually adjust each child's flex settings (which would create more code & take more time).
This class can be applied to any div that has children which should stack side by side. The vertical alignment of those children can be set in the style panel, but the horizontal alignment will match the section's horizontal alignment.
This class can be applied to any div that has children which should stack under each other. The vertical alignment of those children can be set in the style panel, but the horizontal alignment will match the section's horizontal alignment.
Once all flex children within a section have classes of u-alignment-horizontal and u-alignment-vertical, we can apply the alignment mode to any parent to set the horizontal alignment of all children.
