Flex Layout

HTML5 Semantic Structure

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body>*>div {
    max-width: 100ch;
    margin: 0 auto;
}
main {
    flex-grow: 1;
}
main>div {
    display: flex;
    flex-wrap: wrap;
}
main>div>aside {
    flex: 1 1 10em;
}
main>div>section {
    flex: 4 1 30em;
}