Layout de blocos com flexbox em CSS

Vamos agora aprender a criar um layout de blocos usando flexbox. Primeiro, vamos dispor os blocos flexíveis em várias linhas, com três blocos por linha.

Para isso, vamos definir a largura do contêiner pai como 300px e flex-wrap com o valor wrap, e a largura dos filhos como 100px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Agora vamos criar um espaçamento entre os nossos blocos na horizontal. Para isso, vamos aumentar a largura do contêiner pai para dar espaço extra para as margens.

Como temos três blocos por linha, isso significa que há dois intervalos entre eles. Digamos que queremos que cada intervalo tenha uma largura de 10px. Isso significa que a largura do pai precisa ser aumentada em 20px, ou seja, deve ser 320px em vez de 300px.

Agora vamos definir justify-content no contêiner pai como space-between para obter o espaçamento desejado entre os blocos:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Agora vamos adicionar o mesmo espaçamento entre os blocos na vertical. Para isso, podemos definir a propriedade align-content com o valor space-between.

No entanto, para isso é necessário definir uma altura para o contêiner pai, caso contrário, align-content não funcionará. Vamos definir a altura como 320px. Neste caso, caberão exatamente três linhas de blocos com 100px de altura mais dois intervalos entre as linhas de 10px.

Vamos executar:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tudo funciona perfeitamente, mas existem alguns problemas que veremos na próxima lição.