flex example gap

by jpeter06

HTML

<div class="footer">
Header
</div>
<div class="ocupaTodo center">
  <span>Ocupamos todo</span>
  <span>Ocupamos todo2</span>
</div>
<div class="footer">
  <button>
  boton1
  </button>
    <button>
  boton1
  </button>
    <button>
  boton1
  </button>
  <button class="marginLeftAuto">
  boton2
  </button>
    <button>
  boton3
  </button>
</div>

CSS

html,body{
  margin:0px;
  padding:0px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  border:5px solid transparent;
  gap:10px;
  box-sizing: border-box;
}

body div{
  background: #fa0;
}

.center{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  text-transform: uppercase;
}

.ocupaTodo{
  flex-grow:2;
  background: #fa0;
}

.footer{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  padding:5px;
}

.marginLeftAuto{
  margin-left:auto;
}