<div class="viewport flex-parent flex-col">
  <div class="nav flex-parent space-around">
    <div class="box-1 flex-parent space-evenly align-center"></div>
    <div class="box-2 flex-parent space-evenly align-center"></div>
    <div class="box-3 flex-parent space-evenly align-center"></div>
  </div>
  <div class="content flex-parent">
    <div class="sidebar-right"></div>
    <div class="main-area"></div>
    <div class="sidebar-right"></div>
  </div>
  <div class="footer flex-parent space-evenly">
    <div class="box-4"></div>
    <div class="box-5"></div>
    <div class="box-6"></div>
  </div>
</div>

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.viewport{
  min-height: 100vh;
  min-width: 100%;
  border: 5px solid black;
}

.flex-parent{
  display: flex;
}

.flex-col{
  flex-direction: column;
}

.space-around{
  justify-content: space-around;
}

.space-evenly{
  justify-content: space-evenly;
}

.align-center{
  align-items: center;
}

.nav{
  min-width: 100%;
  min-height: 20vh;
  border: 5px dashed blue;
}


.box-1{
  min-width: 20vw;
  background-color: yellow;
}

.box-2{
  min-width: 20vw;
  background-color: purple;
}

.box-3{
  min-width: 20vw;
  background-color: red;
}

.content{
  mn-width: 100%;
  min-height: 80vh;
  border: 5px dashed orange;
}

.footer{
  min-width: 100%;
  min-height: 20vh;
  border: 5px dashed cyan;
}

.sidebar-left{
  min-width: 20%;
  background: teal;
}

.main-area{
  min-width: 60%;
  background: green;
}

.sidebar-right{
  min-width: 20%;
  background: blue;
}

.box-4{
  min-width: 15%;
  background: pink;
}

.box-5{
  min-width: 30%;
  background: maroon;
}

.box-6{
  min-width: 20%;
  background: black;
}