Due to changes in the implementation over time, there now exist two major implementations of flexbox. For more information on the old and new implementations, you can visit this page.
If you are looking for a tutorial on the current status of the Flexbox implementation, you can find one here.
Here is an example HTML structure of a page (demo on Codepen here):
<div class="page-wrap">
<section class="main-content" role="main">
Main content: first in source order
</section>
<nav class="main-nav" role="navigation">
Links
</nav>
<aside class="main-sidebar" role="complementary">
Sidebar
</aside>
</div>
To divide the page-wrap into three sections with the main-nav being twice as big as the sidebars, you can utilize flexbox. Additionally, you can change the rendering order of elements without changing their position in the DOM, which can be beneficial for screen readers.
In order to make the page-wrap a flexbox context, you need to apply the following CSS:
.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+ */
}
The order of properties matters when it comes to browser compatibility, so ensure that newer properties come after older ones where applicable. This is because the display property does not require prefixes anymore.
To set the widths of the items, use the following CSS:
.main-content {
width: 60%;
}
.main-nav,
.main-sidebar {
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 20%;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
To adjust the ordering of items to have the main-nav rendered before the main-content, use the following CSS:
.main-content {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.main-nav {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.main-sidebar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}