Skip to content

Instantly share code, notes, and snippets.

@tomdavies
Forked from adactio/flexboxtest.html
Created August 16, 2011 11:44
Show Gist options
  • Save tomdavies/1148899 to your computer and use it in GitHub Desktop.
Save tomdavies/1148899 to your computer and use it in GitHub Desktop.
Content-first flexbox test
<!DOCTYPE html>
<html>
<head>
<title>Flexbox test</title>
<style>
@media screen and (min-width: 30em) {
body {
width:100%;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
-ms-box-direction: reverse;
box-direction: reverse;
}
[role="navigation"] ol {
width:100%
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-box-direction: normal;
box-direction: normal;
}
[role="navigation"] li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
}
}
</style>
</head>
<body>
<div role="main">
<p>This is the main content.</p>
</div>
<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>
</body>
</html>
@tomdavies
Copy link
Author

fiddling about trying to make this work properly in FF

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment