Flexbox Flexible Box Layouts Flex Website
Learn to build flexible layouts for websites or interfaces using the Flexible box model of CSS.
Combine this with CSS3 Media Queries to make impressive fully responsive-flexible layouts.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox Layout Tutorial</title>
<style>
body { margin: 0px; }
body > div{
display: flex;
flex-flow: row wrap;
}
body > div > header,nav,main,aside,footer {
background: #CCC; border-radius: 7px; margin:5px; padding: 20px;
}
body > div > header { order: 1; height:100px; flex: 0 1 100%; }
body > div > nav { order: 2; width: 200px; flex: 0 1 200px; }
body > div > main { order: 3; min-height:400px; flex:1; }
body > div > aside { order: 4; width: 200px; flex: 0 1 200px; }
body > div > footer { order: 5; height:250px; flex: 0 1 100%; }
</style>
</head>
<body>
<div>
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Aside Content</aside>
<footer>Footer</footer>
</div>
</body>
</html>