css flex box challenge -3-CodePudding

**please do help in making this CSS page I posted below ** take it as a challenge , I tried but failed in it. have a nice dayenter image description here

CodePudding user response：

<div style="display:'flex'">
   <nav> </nav>
   <div style="display: 'flex'; flex-direction:'column' "> 
    <header> </header>
    <div> </div>
    <footer> </footer>
  </div>
 </div>

CodePudding user response：

You could've made your question better by at least showing your code attempt(s), so someone can help you with the exact thing you are stuck at.

I did think this challenge might be interesting to have a go at so here's my attempt (also at my CodePen):

body {
    margin: 0;
    border: 0;
    padding: 0;

    width: 1360px;
    height: 760px;

    display: flex;
    flex-direction: row;

    font-size: 25px;
    font-family: monospace;
}

nav {
    padding: 8px;
    border: 0;
    margin: 0;

    width: 20%;
    height: 104.5%;
    box-sizing: content-box;
    
    display: flex;
    flex-direction: column;

    background-color: grey;
}

div {
    padding: 0;
    border: 0;
    margin: 0;

    width: 100%;
    height: 100%;

    flex-direction: column;
}

header {
    padding: 8px;
    border: 0;
    margin: 0;

    width: inherit;
    height: 25%;

    flex-direction: column;

    background-color: indianred;
}

article {
    padding: 8px;
    border: 0;
    margin: 0;

    width: inherit;
    height: 50%;

    flex-direction: column;

    background-color: sandybrown;
}

footer {
    padding: 8px;
    border: 0;
    margin: 0;

    width: inherit;
    height: 25%;

    flex-direction: column;

    background-color: salmon;
}

<body>
        <nav>
            Nav!
        </nav>
        <div>
            <header>
                Header!
            </header>
            <article>
                Article!
            </article>
            <footer>
                Footer!
            </footer>
        </div>
    </body>
</html>