I need to make a flexbox table

Question

I made the following code I am not able to center the images that are in the middle and also I am not able to padding the last column I need to do something like it is in the image.

.container {
  display: flex;
  border-bottom: 1px solid rgb(241, 241, 241);
  justify-content: space-between;
}
.espaco {
  padding: 20px;
}
.tumbup {
  text-align: center;
  /*   text-align: left; */
}
.top {
  text-align: center;
  color: orangered;
}

.top1 {
  color: orangered;
  padding: 20px;
}

  <nav class="container">
    <div class='top1'>Funcinalidades</div>
    <div class='top'>Basic</div>
    <div class='top'>Summer</div>
</nav>
<nav class='container'>
  <div class='espaco'>Monitorização por GPS</div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>
<nav class='container'>
  <div class='espaco'>Desafios virtuais</div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>
<nav class='container'>
  <div class='espaco'>Integração móvel</div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>
<nav class='container'>
  <div class='espaco'>Alertas treino excessivo</div>
  <div></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>
<nav class='container'>
  <div class='espaco'>Análise de desempenho detalhado</div>
  <div></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>
<nav class='container'>
  <div class='espaco'>Dados Frequência cardíaca</div>
  <div></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>
<nav class='container'>
  <div class='espaco'>Objetivos personalizados</div>
  <div></div>
  <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
</nav>

Answer 1

You have to "equalize" the size of the children’s items flex container, because some have larger text than others. For that then just declare flex:1 in divs within the Flex container.

This will basically cause each proportional way div daughter has 1/3 the width of the parent container

  .container {
    display: flex;
    border-bottom: 1px solid rgb(241, 241, 241);
    justify-content: space-between;
  }

  .espaco {
    padding: 20px;
  }

  .tumbup {
    text-align: center;
    /*   text-align: left; */
  }

  .top {
    text-align: center;
    color: orangered;
  }

  .top1 {
    color: orangered;
    padding: 20px;
  }

  nav > div {
    flex: 1;
  }

  <nav class="container">
    <div class='top1'>Funcinalidades</div>
    <div class='top'>Basic</div>
    <div class='top'>Summer</div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Monitorização por GPS</div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Desafios virtuais</div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Integração móvel</div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Alertas treino excessivo</div>
    <div></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Análise de desempenho detalhado</div>
    <div></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Dados Frequência cardíaca</div>
    <div></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>
  <nav class='container'>
    <div class='espaco'>Objetivos personalizados</div>
    <div></div>
    <div class='tumbup'><img src="https://via.placeholder.com/20x20" alt=""></div>
  </nav>