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:

.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:

.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%:

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

Defina a largura dos blocos em porcentagem para que o layout tenha três blocos por linha.

Defina a largura dos blocos em porcentagem para que o layout tenha dois blocos por linha.

Defina a largura dos blocos em porcentagem para que o layout tenha um bloco por linha.