Skip to content

First Steps with Flexbox

On a recent project for international research machine builder Anton Paar, I used the new flex-box CSS module for the first time. Here’s how it went.

The flex box module has had a long gestation period, and there are 2 main specs of the module, so when researching methods of using it you have to be careful to find recent enough posts which outline the latest spec.

As always, CSS Tricks was particularly useful, along with Stack Overflow in getting familiar with the syntax and methods.

The Problem

It’s not a biggie, but I like things to line up nicely. As it stood, the four content boxes on the home page of Anton Paar UK’s microsite would be populated by both static content and dynamic. We decided to use Flexbox to line the four columns up, something that has never been achieveable before in CSS without Javascript.

Here’s the HTML:

<div class="row home-features">
	<div class="col-md-3 home-feature">
		<div class="well">
			<?php
			if ( function_exists( 'dynamic_sidebar' ) ) {
				dynamic_sidebar( "home-1" );
		} ?>
		</div>
	</div>
	<div class="col-md-3 home-feature">
		<div class="well">
			<?php
			if ( function_exists( 'dynamic_sidebar' ) ) {
				dynamic_sidebar( "home-2" );
			} ?>
		</div>
	</div>
	<div class="col-md-3 home-feature">
		<div class="well">
			<?php
			if ( function_exists( 'dynamic_sidebar' ) ) {
				dynamic_sidebar( "home-3" );
			} ?>
		</div>
	</div>
	<div class="col-md-3 home-feature">
		<div class="well">
			<?php
			if ( function_exists( 'dynamic_sidebar' ) ) {
				dynamic_sidebar( "home-4" );
			} ?>
			</div>
		</div>
	</div>
</div>
<!--/.row -->

As you can see from the following screenshot from before the site went live, the problem was that the 4 columns weren’t lining up. This has long been almost impossible to do in HTML / CSS, certainly without misappropriating the position: absolute property.

Anton Paar UK Microsite without using flex-box

But using Flexbox allowed us to simplify the code by removing the well DIVs as well as provide a solution to the problem:

.home-features {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding: 0 10px;
}
.home-feature {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

We added this attribute under a media-query of (min-width: 992px) so that the columns would stack at smaller viewport sizes.

Anton Paar UK Microsite after using flex-box

This exercise has proved to be a great solution to an ongoing problem in web development.

After using it on this project I really don’t want to go back, which is a shame because there are still some caveats with Safari (Both Mac OS X and iOS).

In fact, this blog has a stylesheet for Flexbox which I’m hoping to implement soon with a fallback for Safari (without browser sniffing).

“Wisest are they who know they do not know.” —Jostein Gaarder