Skip to content

Instantly share code, notes, and snippets.



Forked from benfrain/dabblet.css
Last active Jul 14, 2017
What would you like to do?
CSS Flexible Layout Module - flexbox styling
* CSS Flexible Layout Module - flexbox styling
* { transition: all 2s; }
body {
background: #bfbfbf;
header,aside,.mainContent,.extraDiv,footer {
padding: 1em;
font-size: 1.4em;
header {
background-color: blue;
padding: 1em;
.wrapper {
display: flex;
aside {
background-color: orange;
width: 20%;
order: 2;
.mainContent {
background-color: white;
order: 3;
.extraDiv {
background-color: pink;
width: 20%;
order: 1;
footer {
background-color: green;
width: 100%;
clear: both;
@media all and (max-width: 500px) {
/* change below 500px */
.wrapper { flex-flow: column; }
.mainContent, aside, .extraDiv {
/* Return them to document order */
order: 0; width: auto;
<header role="banner">here is the header</header>
<div class="wrapper">
<div class="mainContent">Here is the main content</div>
<aside role="complementary">here is a sidebar, after the main content (although we want to make it appear before)</aside>
<div class="extraDiv">Oh Lord, now my head is starting to hurt!</div>
<footer role="contentInfo">here is the main footer</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.