flex layout 3 panel

header and content with left and center

by ramesh valasa

HTML

<div class="wrapper">
  <header class="header">Header</header>
  <button class="button">test </button>
  <div class="aside aside-1"> navigation panel</div>
  <div class="main">
    workspace
  </div>
  
  
</div>

CSS

html, html body, .wrapper {
  height: 100%;
  padding: 0;
}

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: center;
}

.header {
  padding: 10px;
  flex: 1 100%;
  height: 50px;
}

.aside { width; 300px;   padding: 10px;}
.main    {  flex-grow: 1;  padding: 10px;}

.aside, .main {
  height: 100%;
}

.header {
  background: tomato;
}

.button {
  width: 24px;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

body {
  padding: 2em; 
}