All examples By author By category About

nitaku

CSS3 Flexbox - Sidebar

A really simple exercise that leverages the long-awaited CSS3's Flexible Box Model to create a sidebar. The sidebar takes the rightmost part of the view, while the main content is nicely centered inside the leftmost area. There are no pixel/percentage widths nor Javascript magic. Try to resize your browser's window (or rotate your mobile device) to see it working (you may need to open this example in its own window - just click "full page" if you are on WebVis, or "Open in a new window" if you are on bl.ocks.org).

You can check the tables on caniuse.com to see the current support for flexbox.