Speed up alignment in CSS with Flexbox utility classes
Aligning things in CSS has always been a nightmare (yes, I like drama). Then Flexbox came and with it the possibility to align items in a way that makes sense! In this article, I’m going to share a set of CSS utility classes based on Flexbox that can be used to align things in no time!
I originally created these classes for our library of web components. They will probably be included as an optional global CSS file (meaning you can delete it, and nothing will change).
For those of you who prefer to skip the article entirely and take a look at the final CSS file, you can check it out here.
Here’s a quick video tutorial on the same topic:
Before Flexbox
Before Flexbox, we had to rely on CSS tricks to align things. Lets’ take a look at some examples.
Example 1) If you were dealing with text, you could rely on the text-align and line-height properties, setting the line-height of the .child equal to the line-height of the .parent:
This technique works as long as the text does not wrap. The real challenge was dealing with paragraphs! You were forced to set a size for the .child element, which brings us to the next example.
Example 2) If you were trying to align an element with a known width (but unknown height) on the x-axis, you could just set the margin left and right equal to “auto”.
If you were trying to align the same element on both axes, you could use the trick based on absolute positioning and the translate() function.
One issue I’ve been experiencing with the technique described above is some blurriness on devices with lower screen resolution. This happens if the function translates the element by a value that is not an integer (e.g., if the element height is an odd value). You won’t see this problem if you’re on a retina display.
Example 3) Aligning elements with a known size was the best! You still had to set an absolute position to the .child, and then use the calc() function to align it horizontally and vertically.
Flexbox to the rescue!
Flexbox changes everything (no more tricks! 👏). To align things using Flexbox, you can either target the .parent, or the .child. For example, to center something (both on the x-axis and the y-axis), you can just apply the justify-content property and the align-items property:
The justify-content property is used to align the content along the main axis (the x-axis if you did not change the flex-direction property). The align-items property to align the elements along the cross axis.
Getting back to the original goal of the article, I was trying to create a set of utility classes that can be used to align any element within its parent. Like I’ve mentioned before, to align things in Flexbox you can target the .child element. The super cool thing is that if you set a margin equal to “auto” to a flex item, it automatically self-aligns.
For example, to align an item in the center, you can use the following snippet:
Note that the align-self is required in this case to fix an issue on IE.
From here, the idea to create the _alignment.scss global:
The .align-center, .align-left and .align-right classes automatically align items on the y-axis; then you can pick one of the three classes to align the flex item horizontally.
The other classes allow you to be more specific with where you want to align your items on both axes. The cool thing about this method is that you’re not limited to one .child item. You can see this snippet in action in this pen:
I hope you enjoyed the article! For more web design nuggets, follow us here on Medium or Twitter. 🙌
