block by nitaku 1438f3649f0e4e01150f

CSS3 Flexbox - Sidebar

Full Screen

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.

index.html

index.css