Last Updated: September 09, 2019
·
3.745K
· ultimatedelman

SASS/Compass Mixin For Flexbox (New and Legacy)

Flexbox is awesome, and I find it sad that many developers aren't using it. Reasons range from "it's too hard" to "it's not fully supported yet" to "I don't want to support both specs!" Well, I made it pretty easy for you.

I built a SASS/Compass mixin (well, series of mixins) that enables a developer to very easily build a flexbox layout using the new syntax that will automatically translate your values into the legacy format to support browsers that haven't quite caught up with the spec. It's as simple as:

.container {
    @include flexcontainer;
}
.child {
    @include flexchild;
}

Of course there are many configurable properties and a helper flexprop() mixin for single properties. The mixin will create all the necessary code for legacy support and will translate the spec-based properties into IE's weird proprietary properties.