Flex box : Travailler sur une structure

HTML 5

<header>
  header
  <nav>nav
        <ul>ul
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
        <li><a href="#">link 4</a></li>
        </ul>
  </nav>
</header>

<!-- content centre -->
<div class="content">
  content
<main>
  main
<!-- -->
  <article>
    article 1
    <h1>article 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
  </article>
<!-- -->
<!-- -->
  <article>
    article 2
    <h1>article 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
  </article>
 <!-- -->
</main>

<aside>
  aside
</aside>

  <!-- fin du content centre -->
</div>

<footer>
  footer
</footer>

CSS

/* reset */
* {
  margin:0;
  padding:0;
  box-sizing:content-box;
}

a {
  outline : none;
}

/* base */
html {
  background-color:#f1f1f1;
}

body { 
  /* BOXED BODY */ 
  max-width:1200px;
  background-color:white;
  margin:auto;
  /*font-family: arial, sans-serif;*/
}

/* notes */
/* CSS VERTICAL align-items: flex-start | flex-end | center | baseline | stretch */

/* CSS HORIZONTAL justify-content: flex-start | flex-end | center | space-between | space-around */

/* COMMENCER VOTRE CSS A PARTIR D'ICI */

/* parents */

header {
  background-color:orange;
  
}

.content {  
  background-color:BEIGE;
  display:flex;
  
  
}

main {
  background-color:LINEN;
  width:70%;
  display:flex;
}

aside {
  /* réglage de la largeur de aside : le main sera donc à 70% */
  width:30%;
  /* image aleatoire en background de aside */
  background-image:url(https://picsum.photos/300/800);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  
}

footer {
  background-color:SALMON;
  
}

/* childs */

header nav {  
  background-color:TAN;
 

}

header ul {  
  background-color:PERU;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  list-style:none;

  
}

header li {  
   background-color:BROWN; 
  flex-grow:1;
}

header li a {
   background-color:WHITE; 
  display:flex;
  flex-grow:1;
  justify-content:center;
  text-decoration:none;

}

header li a:hover {  
   background-color:RED; 
}

main article {
  background-color:TAN;

  }

main article p {
  background-color:WHEAT;
}

main article h1, h2, h3 {
  background-color:BISQUE;
}

/* NE RIEN METTRE EN DESSOUS DE CETTE LIGNE */

/* padding and margin pour l'exercice*/
* {
  padding:5px;
  margin:3px;
  border:1px solid grey;
}

a {
  padding:0;
  margin:0;
  border:none;
}

* {
  font-family : serif; 
  color:gray; 
  font-style:italic;
}
  
p, h1, a {
  font-family : arial, sans-serif; 
  color:black; 
  font-style:normal; 
}