Is CSS Flexbox ready for prime time yet?

Martin Defatte
Nov 23, 2016 · 5 min read

TLDR: YES.

So, as a front-end developer, I sometimes have to ask myself: “Wow, this is a really cool new technology. Can I use this in my workflow in a production website at work, or does it sound better in theory than in practice?” I find myself always evaluating new CSS specifications to see if it will make my designs better and make my code more succinct and easier to manage.

FLEXBOX IS GREAT FOR RESPONSIVE DESIGN

Flexbox is not a new feature… BUT, with the influx of new mobile devices in recent years, and their need for flexible, responsive layouts and patterns, it’s something you should definitely consider rolling into your next project, if you haven’t already. Don’t worry, though — you can use it side-by-side with whatever grid framework you use. I’m still using a modified version of Skeleton Grid which I’ve added some SASS variables and mixins to. If you really wanna get crazy, try using Flexbox with vh or vw units instead of pixels or percentages.

BUT WHAT ABOUT DESKTOP BROWSER COMPATIBILITY?

Don’t worry, I got you, fam. Check out the compatibility chart over at CanIUse.com. At the time of this writing, the current browser offerings all support Flexbox, with IE 11 being the only stalwart lagging behind with “partial support.” This can be overcome if you take into account the known bugs and work with them.

SO INTERNET “EXPLODER” IS STILL A PAIN IN THE ASS, THOUGH, RIGHT?

Yes, but their market share is so small, I wouldn’t sweat it. Just look at the latest IE usage stats over at W3C. At the time of this writing, IE10 and older only represent 0.4% of ALL BROWSERS currently in use (see figure 1.1) . But, before you use Flexbox in your next project, you should also consider if your client’s user demographic skews higher in IE10 by reviewing analytics, if possible.

figure 1.1

OK. SO THERE’S WIDE SUPPORT, BUT HOW DO I START USING IT?

Instead of trying to recreate Flexbox demos that already exist, you should definitely read “A Complete Guide to Flexbox” by acclaimed CSS guru, Chris Coyier AND “A Visual Guide to CSS3 Flexbox Properties” published by Dimitar Stojanov. Both articles have great explanations and depictions of the Flexbox rules in use. I often refer back to these articles when I’m trying to integrate Flexbox into my layouts… since it’s still a bit fresh to me as well.

THIS IS HOW I’VE BEEN USING IT IN MY WORK

One of the main programming mantras you’ll hear from time to time is “Don’t Repeat Yourself,” also known as DRY. In the spirit of code brevity, I’ve integrated Flexbox into my work by adopting this great SASS mixin library which takes all the headache of having to account for all of the browser prefixes. Don’t know what SASS is? You might want to read my last article.

@mixin flexbox {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}
.element {
	@include flexbox;
}
figure 1.2
<section id="section-1" class="dualCTAbox flexcontent row">
	<div class="ctaBox" style="background-image:url('image_1.jpg');">
		<a href="#">
			<div class="icon"><img src="icon1-108x72.svg" width="52" height="35" alt="Section Title 1"></div>
			<h5>Section Title 1</h5>
			<p>Tation aliquip vulputate ex sit facilisis accumsan te eu nonummy feugait autem.</p>
			<div class="btnWrapper"><span class="button button-primary">Learn More</span></div>
		</a>
	</div>
	<div class="ctaBox" style="background-image:url('image_2.jpg');">
		<a href="#">
			<div class="icon"><img src="icon2-108x72.svg" width="52" height="35" alt="Section Title 2"></div>
			<h5>Section Title 2</h5>
			<p>Tation aliquip vulputate ex sit facilisis accumsan te eu nonummy feugait autem.</p>
			<div class="btnWrapper"><span class="button button-primary">Learn More</span></div>
		</a>
	</div>
</section>
.dualCTAbox {
	@include flexbox;
	@include align-items(stretch);
	@include align-content(stretch);
	@include flex-wrap(wrap);
	.ctaBox {
		text-align:center;
		@include align-self(stretch);
		@include flexbox;
		a {
			@include flexbox;
			@include align-items(center);
			@include justify-content(center);
			@include flex-wrap(wrap);
			@include align-content(center);
			div,
			h5,
			p {
				width: 100%;
				margin-bottom: .8em;
				line-height: 1.2em;
			}
			h5 {
				margin-bottom: 0;
				line-height: 1.2em;
			}
			width: calc(100% - 40px);
			padding: 20px;
			min-height: 240px;
		}
		.button{
			margin-bottom: 0;
		}
	}
}