⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Flexbox Flexible Box Layouts Flex Website

Published : December 23, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲