{"id":20158,"date":"2013-02-18T11:14:30","date_gmt":"2013-02-18T18:14:30","guid":{"rendered":"http:\/\/css-tricks.com\/?p=20158"},"modified":"2013-06-15T13:49:09","modified_gmt":"2013-06-15T20:49:09","slug":"using-flexbox","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-flexbox\/","title":{"rendered":"Using Flexbox: Mixing Old and New for the Best Browser Support"},"content":{"rendered":"

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the “Old” and “New”<\/a> syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids <\/p>\n

<\/p>\n

The HTML<\/h3>\n

A semantically meaningless wrapper goes around the three main areas and will set the flexbox context. Each of the areas is semantically marked up and will be turned into columns.<\/p>\n

<div class=\"page-wrap\">\r\n  \r\n  <section class=\"main-content\" role=\"main\">\r\n    Main content: first in source order\r\n  <\/section>\r\n  \r\n  <nav class=\"main-nav\" role=\"navigation\">\r\n    Links\r\n  <\/nav>\r\n  \r\n  <aside class=\"main-sidebar\" role=\"complementary\">\r\n    Sidebar\r\n  <\/aside>\r\n    \r\n<\/div><\/code><\/pre>\n
The end result looking like this:<\/p>\n
<\/figure>\n
Flexbox Context<\/h3>\n
We need to make the container for our columns a flexbox display context. Just by doing this, all direct children of this element become flex items. Doesn’t matter what they were before, they are flex items now.<\/p>\n
Right away we need to weave the old, new, and tweener syntaxes together. Order is important here<\/strong>. Since the display property itself isn’t prefixed, we need to make sure we don’t override newer syntaxes with older syntaxes for browsers that still (and probably always will) support both.<\/p>\n
.page-wrap {\r\n  display: -webkit-box;      \/* OLD - iOS 6-, Safari 3.1-6 *\/\r\n  display: -moz-box;         \/* OLD - Firefox 19- (buggy but mostly works) *\/\r\n  display: -ms-flexbox;      \/* TWEENER - IE 10 *\/\r\n  display: -webkit-flex;     \/* NEW - Chrome *\/\r\n  display: flex;             \/* NEW, Spec - Opera 12.1, Firefox 20+ *\/\r\n }<\/code><\/pre>\n
Controlling Column Widths<\/h3>\n
Our goal here is a 20% \/ 60% \/ 20% grid. <\/p>\n
Step 1 is to set our main content to the 60%.
\nStep 2 is to set the outside sidebars to fill the remaining space equally.<\/p>\n
Again we need to weave together old, new, and tweener syntaxes.<\/p>\n
.main-content {\r\n  width: 60%;\r\n}\r\n.main-nav,\r\n.main-sidebar {\r\n  -webkit-box-flex: 1;      \/* OLD - iOS 6-, Safari 3.1-6 *\/\r\n  -moz-box-flex: 1;         \/* OLD - Firefox 19- *\/\r\n  width: 20%;               \/* For old syntax, otherwise collapses. *\/\r\n  -webkit-flex: 1;          \/* Chrome *\/\r\n  -ms-flex: 1;              \/* IE 10 *\/\r\n  flex: 1;                  \/* NEW, Spec - Opera 12.1, Firefox 20+ *\/\r\n}<\/code><\/pre>\n
In the new syntax, setting the width for the sidebars isn’t necessary as it will fill the remaining 40% equally making them both 20%. But I found not setting it cause some width collapsing with the old syntaxes.<\/p>\n
Column Re-Ordering<\/h3>\n
We want the main content to visually appear in the middle, but be first in the source order. Easy cheesy in flexbox, but of course we need to weave together the new, old, and tweener syntaxes.<\/p>\n
.main-content {\r\n  -webkit-box-ordinal-group: 2;   \/* OLD - iOS 6-, Safari 3.1-6 *\/\r\n  -moz-box-ordinal-group: 2;      \/* OLD - Firefox 19- *\/\r\n  -ms-flex-order: 2;              \/* TWEENER - IE 10 *\/\r\n  -webkit-order: 2;               \/* NEW - Chrome *\/\r\n  order: 2;                       \/* NEW, Spec - Opera 12.1, Firefox 20+ *\/\r\n}\r\n.main-nav {\r\n  -webkit-box-ordinal-group: 1;  \r\n  -moz-box-ordinal-group: 1;     \r\n  -ms-flex-order: 1;     \r\n  -webkit-order: 1;  \r\n  order: 1;\r\n}\r\n.main-sidebar {\r\n  -webkit-box-ordinal-group: 3;  \r\n  -moz-box-ordinal-group: 3;     \r\n  -ms-flex-order: 3;     \r\n  -webkit-order: 3;  \r\n  order: 3;\r\n}<\/code><\/pre>\n
Browser Support<\/h3>\n
If you do all this weaving, you can get:<\/p>\n