Free Flexbox Website Layout 1
Flexbox Website Layout 1
Source Code
<!doctype html>
<title>Example</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
order: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
#main > nav {
background: #D7E8D4;
order: 3;
}
#main > aside {
background: beige;
order: 2;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
</style>
<body>
<header>Header</header>
<div id="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
Comments
Post a Comment