Help please mark the page with standard header + content + footer

Here is my attempt: https://jsfiddle.net/zlodiak/wr70hscu/1/ . It is bad because the following rule is used for header, footer:

.icons_item:nth-child(6), .icons_item:nth-child(1){ width: 100%; }

I would like to use a clean flexbox

  • one
    And the option to add the classes header , footer instead of .icons_item:nth-child(6), .icons_item:nth-child(1) and write the width: 100%; or flex-basis: 100%; ? - HamSter
  • one
    codepen.io/HugoGiraudel/pen/qIAwr here, by the way, is a great example of a standard page. - HamSter

1 answer 1

With flexbox you can mark the page like this:

 body { display: flex; min-height: 100vh; flex-direction: column; } content { flex: 1; display: flex; } section { background: yellow; flex: 3; } aside { background: grey; flex: 1; } header { background: red; } content { background: green; } footer { background: blue; } 
 <body> <header>header</header> <content> <section>content</section> <aside>aside</aside> </content> <footer>footer</footer> </body>