Flexbox Equal Height Columns (Colunas de altura igual)

O Flexbox era para ser o pote de ouro no longo, longo arco-íris de técnicas de layout CSS insuficientes. E a única decepção que tive com o flexbox foi o fato de os fornecedores de navegadores terem demorado tanto para implementá-lo. Não posso afirmar que tenha ultrapassado os limites do flexbox, mas a técnica me permitiu realizar algumas tarefas que eram muito complicadas no passado. Uma tarefa foi dominar facilmente o centralização vertical com flexbox.

Minha próxima tarefa foi criar um layout responsivo de duas colunas com colunas de largura igual, altura igual e margem de pixel fixo entre elas, bem como qualquer quantidade de preenchimento. Foi terrivelmente fácil… e é por isso que adoro o flexbox!

O HTML

A marcação requer um elemento pai e dois elementos filhos:

<div class="flexbox-container">
	<div><h3>Column 1</h3></div>
	<div><h3>Column 2</h3></div>
</div>

O conteúdo de cada coluna pode ter qualquer altura, o que não é importante aqui.

O CSS

O CSS também é incrivelmente fácil e breve:

.flexbox-container {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}

.flexbox-container > div {
	width: 50%;
	padding: 10px;
}

.flexbox-container > div:first-child {
	margin-right: 20px;
}

Basta definir a exibição como flexbox no elemento pai e, em seguida, dar a cada elemento filho 50% de largura. O que é interessante no flexbox é que o senhor pode adicionar preenchimento, borda e margem aos elementos filhos sem precisar se preocupar com o transbordamento de uma coluna para a próxima linha.

Fiquei super empolgado quando soube da Cálculo CSS porque eu queria fazer o que o flexbox faz hoje, mas agora que o flexbox é compatível com praticamente todos os navegadores modernos, não preciso do CSS calc para layouts. Excelente! Estou muito feliz que o flexbox esteja aqui – tarefas que deveriam ser são fácil agora!