Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/1438f3649f0e4e01150f to your computer and use it in GitHub Desktop.
Save nitaku/1438f3649f0e4e01150f to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Flexbox - Sidebar
Raw
README.md

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.

Raw
index.css
html, body {
padding: 0;
margin: 0;
background: white;
font-family: sans-serif;
}
body {
background: rgba(0,0,40,0.3);
}
#main {
padding: 12px;
}
#main > *:not(:last-child) {
margin-bottom: 12px;
}
#main > * {
border: 1px solid #333;
padding: 4px;
text-align: center;
width: 200px;
}
#side {
background: rgba(40,40,0,0.5);
padding: 12px;
color: #DDD;
}
/* relevant section */
body {
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+ */
-ms-flex-flow: row;
-webkit-flex-flow: row;
flex-flow: row;
}
#main {
margin-left: auto;
margin-right: auto;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="CSS3 Flexbox - Sidebar" />
<title>CSS3 Flexbox - Sidebar</title>
<link rel="stylesheet" href="index.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="main">
<div>Some content</div>
<div>More content</div>
</div>
<div id="side">Side content</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment