// ressource technique

Template Flex

<header>
  <div class="logo">logo</div>
  <div class="accroche">accroche</div>
  <div class="lien">lien</div>
</header>
<nav>
  <div class="flex-item-1 flex-item">Menu A</div>
  <div class="flex-item-2 flex-item">Menu B</div>
  <div class="flex-item-3 flex-item">Menu C</div>
  <div class="flex-item-4 flex-item">Menu D</div>
  <div class="flex-item-5 flex-item">Menu E</div>
</nav>
<div class="main">
  <aside>
    aside
  </aside>
  <section>
    <div class="flex-item-1 flex-item">item A</div>
    <div class="flex-item-2 flex-item">item B</div>
    <div class="flex-item-3 flex-item">item C</div>
    <div class="flex-item-4 flex-item">item D</div>
    <div class="flex-item-5 flex-item">item E</div>
    <div class="flex-item-1 flex-item">item A</div>
    <div class="flex-item-2 flex-item">item B</div>
    <div class="flex-item-3 flex-item">item C</div>
    <div class="flex-item-4 flex-item">item D</div>
    <div class="flex-item-5 flex-item">item E</div>
    <div class="flex-item-1 flex-item">item A</div>
    <div class="flex-item-2 flex-item">item B</div>
    <div class="flex-item-3 flex-item">item C</div>
    <div class="flex-item-4 flex-item">item D</div>
    <div class="flex-item-5 flex-item">item E</div>
  </section>
</div>

<footer>
  <div class="flex-item-1 flex-item">Footer A</div>
  <div class="flex-item-2 flex-item">Footer B</div>
  <div class="flex-item-3 flex-item">Footer C</div>
</footer>

*, *:before, *:after { box-sizing: border-box; }

html,
body {
  width:100%;
  height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

header{
  display: flex;
  
  .logo{flex-grow:1;}
  .accroche{flex-grow:4;}
  .logo{flex-grow:1;}
}

nav{
  display: flex;
  justify-content: space-around;
  .flex-item{
    padding:10px; 
    background:#CCC; 
    
  }
}


.main{
  display: flex;
  flex-grow: 1;
  align-items:stretch;
  
  aside{
    background:#EEE;
    flex-grow:1;
   // width:200px;
  }
  section{
    flex-grow:4;
    display: flex;
    flex-wrap:wrap;
    
    .flex-item{
      width:20%;
    }
  }
}

footer{
  height:100px; 
  background:#333;
  color:#FFF;
  display: flex;
  align-items:center;
  justify-content:space-between;
  
  .flex-item-1{
    order:3;
  }
}