Flexbox, abreviação de Flexible Box Layout, é um módulo CSS projetado para simplificar o alinhamento, distribuição e organização de elementos dentro de um contêiner.

Flexbox utiliza uma relação de pai e filho. O pai é chamado de flex container, que controla o layout. Os filhos são chamados de flex items, cujos tamanho, posição e ordem podem ser controlados utilizando propriedades do flexbox.

Nota

Flexbox se comporta de maneira diferente dos elementos block e inline. Ao contrário dos elementos block, os flex items não se empilham verticalmente; eles se alinham em uma linha ou coluna por padrão. Além disso, as margens nas bordas do contêiner não se estendem além de seus limites.

Flexbox em Ação

Flexbox funciona alinhando itens ao longo dos eixos do flex container. Para habilitar o Flexbox, basta aplicar a propriedade display: flex; ao elemento pai. A partir disso, é possível personalizar como os itens se alinham e se distribuem dentro do contêiner.