Flex Helpers

Flex helpers exist to help create components on the fly. Needless to say, they are one of the most complex tools in our library. They can be confusing at first, but they are powerful.

Their uses are many—too many to cover every possibility. You can use them to center an element in a container; you could create a bar of buttons that are spaced evenly apart; and whole hordes of other uses.

These helpers utilize flexbox; having an understanding of how flexbox works will help you utilize this tool, but it’s not absolutely necessary. We’ll go over all the ins-and-outs and the major gotchas of the tool you need to be aware of.

Flexbox Primer

Flexbox has a few things you have to remember. One, it lays out either as a row or a column—it can’t do both at the same time. Two, while it can only “flow” in one direction, it can wrap. Last, but certainly not least, flexbox employs a relative directional system.

There are two axes: the main axis and the cross axis. The main axis runs parallel to the flow while the cross axis runs perpendicular to the flow. If we have a flex row, then the main axis is the horizontal axis and the cross axis is the vertical axis. This is opposite for a flex column; the main axis is the vertical axis and the cross axis is the horizontal axis. This may be confusing at first, but flexbox is a powerful tool.

To learn more about Flexbox, check out these resources: CSS-Tricks, W3Schools, and the Mozilla Developer Network (MDN).

Basics

The most basic implementation includes the flexclass and a modifier of either --[breakpoint]-rowor --[breakpoint]-col. What’s contained inside is up to you; no class is needed for the children elements of a flex helper. In our example, we’re going to create a bar of buttons.

<div class="flex --sm-row">
	<button class="button">One</button>
	<button class="button">Two</button>
	<button class="button">Three</button>
	<button class="button">Four</button>
</div>

It's not bad, but we're not really using the available space that well. Let's improve upon this in the next section.

Alignment

What could be helpful for us would be to take advantage of the aligment modifiers. There are a fair few; let's take a look at some of them.

<div class="flex --sm-row --sm-space-around">
	<button class="button">One</button>
	<button class="button">Two</button>
	<button class="button">Three</button>
	<button class="button">Four</button>
</div>

<div class="flex --sm-row --sm-space-between">
	<button class="button">One</button>
	<button class="button">Two</button>
	<button class="button">Three</button>
	<button class="button">Four</button>
</div>

<div class="flex --sm-row --sm-space-evenly">
	<button class="button">One</button>
	<button class="button">Two</button>
	<button class="button">Three</button>
	<button class="button">Four</button>
</div>

<div class="flex --sm-row --sm-centered">
	<button class="button">One</button>
	<button class="button">Two</button>
	<button class="button">Three</button>
	<button class="button">Four</button>
</div>

In order to show this other type of alignment properties better, we're going to change tracks for a moment. We're still going to be working with the same buttons but inside of a larger container.

Grow and Shrink

These modifiers allow descendents of the flex helper to either take up left over space (grow) or to cede space to an oversized sibling element (shrink). Grow is generally more useful, but they both have their uses.

<div class="flex --sm-row --sm-space-evenly">
	<button class="button">One</button>
	<button class="button">Two</button>
	<button class="button --sm-grow">Three</button>
	<button class="button">Four</button>
</div>

Of course, we're not limited to using grow or shrink options on only one child element at a time. Let's see what this looks like if we applied grow to all of the buttons.

<div class="flex --sm-row --sm-space-evenly">
	<button class="button --sm-grow">One</button>
	<button class="button --sm-grow">Two</button>
	<button class="button --sm-grow">Three</button>
	<button class="button --sm-grow">Four</button>
</div>

Other Modifiers