console
<html>
<body>
<header>header</header>
<main>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</main>
<footer>footer</footer>
</body>
</html>
body {
box-sizing: border-box;
height: 100%;
}
main {
height: 200px;
display: flex;
}
header {
width: 100%;
height: 100px;
border-radius: 20px;
background-color: #ccc;
text-align: center;
font-size: 20px;
}
nav {
flex: 1;
width: 200px;
border-radius: 20px;
order: 1;
background-color: #f00;
text-align: center;
font-size: 20px;
}
article {
flex: 1;
order: 2;
border-radius: 20px;
background-color: #FFFF00;
text-align: center;
font-size: 20px;
}
aside {
flex: 1;
width: 300px;
background-color: #0000ff;
text-align: center;
border-radius: 20px;
order: 3;
font-size: 20px;
}
footer {
width: 100%;
height: 100px;
border-radius: 20px;
background-color: #ccc;
text-align: center;
font-size: 20px;
}