Maquetación con flexbox

by Yolanda Robles

HTML

<div id="container">
  <div id="header" class="flex_item">
    Cabecera
  </div>
  <div id="main">
    <div id="menu" class="flex_item">
      Menu
      <ul>
         <li>Opcion 1</li>
         <li>Opcion 2</li>
         <li>Opcion 3</li>
      </ul>
    </div>
    <div id="main_container" class="flex_item">
      Principal
      <div id="formulario">
        <div class="fila_formulario">
          <label>Nombre:</label>
          <input value="hola" />
        </div>
      </div>
    </div>
  </div>
  <div id="footer" class="flex_item">
    Pie
  </div>
</div>

CSS

#container {
  width: 100%;
  height: 97vh;
  background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
}

#main{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  flex-grow:1;
}

.flex_item {
  border-style: solid;
}

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

#menu {
  background-color: green;
  width:20%
}

#main_container {
  background-color: blue;
  flex-grow:1;
}

#footer {
  background-color: purple;
  height:50px;
}

#formulario
{
  display:flex;
  flex-direction:column;
  background-color:orange;
  height:100%;
}

.fila_formulario
{
  display:flex;
  flex-direction:row;
  width:90%
}

label {
  width:80px;
}

input{
  flex-grow:1;
}