A super tiny and stupid simple flexbox grid mixin.
Here at Pigeon Wisdom, we’ve been using flexbox on client work for about a year now. In that time, we’ve learned a great deal about the spec, where it shines, and perhaps more importantly, where it flounders.
For staters, it’s not the layout golden ticket heralded by so many before it dropped. But, if you’re aware of its limitations and proper use, flexbox can result in much cleaner, and far less, code.
Most flexbox grid systems currently in the wild are essentially updated versions of the whole float-based 12 columns thing, with flex-basis replacing width. And that’s cool. We’ve adapted our own tried-and-true grid in a similar fashion.
However, in moving towards BEM syntax and more modular / component-based builds, our use of grid helper classes has significantly diminished. This especially rings true when dealing with CMS generated content with unknown child elements – a pattern common to all of our builds these days. Instead, we’ve been rocking a handy little flexbox mixin that’s applied directly to grid containers.
//----------------------------------------------
// flex-grid();
// Creates grid blocks via flexbox
// @param: $sm, $med, $lg, $xl - @media sizes
// @param: $pad - item padding
// @useage: @include g-blocks(1, 2, 3, 4, 0.5em);
//----------------------------------------------
@mixin flex-grid($sm:null, $med:null, $lg:null, $xl:null, $pad:0) {
display: flex;
flex-direction: row;
flex-flow: wrap;
margin-left: -$pad;
margin-right: -$pad;
list-style: none;
& > * {
padding: $pad;
flex-basis: 100%/$sm;
max-width: 100%/$sm;
@media (min-width: $mq-med) {
flex-basis: 100%/$med;
max-width: 100%/$med;
}
@if $lg {
@media (min-width: $mq-large) {
flex-basis: 100%/$lg;
max-width: 100%/$lg;
}
}
@if $xl {
@media (min-width: $mq-xlarge) {
flex-basis: 100%/$xl;
max-width: 100%/$xl;
}
}
}
}
//----------------------------------------------
// Media Queries
//----------------------------------------------
$mq-small: 32em;
$mq-med: 54em;
$mq-large: 65em;
$mq-xlarge: 91em;
The mixin itself takes 5 arguments – The first 4 relate to the number of columns across 4 breakpoints (sm, med, lg, xl), and the last applies column padding. The arguments are optional, so you can add just what you need without generating any extra output. As you can see, we’re using the universal selector so you can apply the grid to any parent, without having to alter your column classes – ideal for BEM syntax.
For the following examples, lets say we have a parent class called .blocks, with childs named .blocks__item (though, the child name is irrelevant). Here are a few grid possibilities:
1 column at sm, 2 at med, 3 at lg, 4 at xl, with 0.5em of padding:
.blocks{
@include g-blocks(1, 2, 3, 4, $pad:0.5em);
}2 columns at sm, 3 at med, 4 at lg, with 0.5em of padding:
.blocks {
@include g-blocks(2, 3, 4, $pad:0.5em);
}
1 column at small, 3 at medium, with 1em of padding:
.blocks {
@include g-blocks(1, 3, $pad:1em);
}
You get the idea.
Here’s a little demo of the mixin in action, and you can also snag the code on Github
While flexbox is well supported now, there are plenty of browser related issues that you’ll encounter. Here are a few that we’ve run into:
padding-bottom moves, unless you nest. Lame.// Firefox flexbox fix
* {
min-width: 0;
min-height: 0;
}For more on flexbox bugs and fixes, check out Philip Walton’s Flexbugs community collection repo.
Learn more about the spec here.
For a complete guide to Flexbox, check this CSS Tricks article.
