Layout de blocos com largura automática em CSS

Na lição anterior, no nosso layout de blocos, acontecia que a largura dos elementos e suas margens somadas precisavam resultar na largura do elemento pai. Isso é um pouco pouco universal. Vamos fazer com que os elementos se ajustem automaticamente à largura do pai.

Suponha que temos o seguinte elemento pai:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

Suponha que os elementos deste layout tenham 4 blocos por linha:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Vamos definir a largura dos nossos blocos para que cada um deles ocupe um quarto do pai. Para isso, definiremos seu tamanho para 25%:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}