Using Flexbox Now
Wednesday, 20 February 2013 by Ian Ebden
Looks like this article is over a year old, so some of the technical solutions or opinions may be a bit outdated now.
<div class="page-wrap">
<nav class="main-nav" role="navigation">
Links
</nav>
<section class="main-content" role="main">
Main content
</section>
<aside class="main-sidebar" role="complementary">
Sidebar
</aside>
</div><!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Flexbox</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>.page-wrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
background-color: #eee;
padding: 2em;
width: 60%;
}
.main-nav, .main-sidebar {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
padding: 2em;
}
.main-nav {
background-color: #999;
}
.main-sidebar {
background-color: #ccc;
}
/* Older MSIE workarounds */
.lt-ie9 article, .lt-ie9 aside, .lt-ie9 nav {
display: block;
}
.lt-ie10 .main-content {
float: left;
padding: 2em 3%;
width: 54%;
}
.lt-ie10 .main-nav {
float: left;
padding: 2em 3%;
width: 14%;
}
.lt-ie10 .main-sidebar {
float: left;
padding: 2em 3%;
width: 14%;
}The top portion of these styles is taken from Chris’ article, I’ve just added some background colours to show up the columns better in the browser. The bottom half is where we use our conditional classes, and do our float fallback.
Firstly (for <IE9) we get the <article>, <aside> and <nav> displaying as block-level elements, just as they would in modern browsers. Next, since <IE10 will simply ignore all our earlier Flexbox declarations, we can use conditional classes (.lt-ie10) to target those browsers and use the old float method for layout. Job done.
A quick cross-browser test in BrowserStack came up trumps (apart from a width issue in Firefox which I’m looking into). So if you’re okay about mixing old and new Flexbox syntaxes in your styles (and why wouldn’t you be?), then now might be the time to start using Flexbox on live projects.
End
