<style>

header { background-color: #1abc9c; height: 80px; }

nav { background-color: #3498db; }

article { background-color: #9b59b6; }

footer { background-color: #e67e22; }

header, nav, article, footer { color: white; padding: 10px; }

header, footer { height: 80px; text-align: center; }

h1, p { margin: 0 0 15px 0; }

nav a { border-bottom: 1px solid rgba(255,255,255,.3); color: white; display: block; line-height: 40px; text-decoration: none; }

.main{

  display:flex;

  height:80%;

}

.main nav{

  width:200px;

}

.main article{

  flex-grow:1;

}

</style>

<header>

    <h1>ici un entete!</h1>

</header>

<div class=main>

  <nav role="navigation">

    <a href="#">l1</a>

    <a href="#">l2</a>

    <a href="#">l2</a>

  </nav>

  <article>

    <p>Quand tout va bien on peut compter sur les autres, quand tout va mal on ne peut compter que sur sa famille.</p>

  </article>

</div>

<footer><p>© TP flexbox</p></footer>