In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module – flexbox – to center an element horizontally and vertically.

I’ll show how to do this along with some other examples of what you can do with flexbox. But first of all a couple of – rather big – caveats, to make you aware of them upfront:

  • Flexbox is currently only supported natively by Gecko (Firefox) and WebKit (Safari, Chrome) browsers. For Opera and IE you can try Flexie, a JavaScript workaround. I’ve only had a quick look at it and can’t say how well it works.
  • The flexible box layout specification will change to use other property names among other things. See Differences in Flexbox drafts and the Editor’s draft of the Flexible Box Layout Module for details. In other words what you see here will not be the exact way to do flexible box layouts in the future.

Read full post

Posted in .