O que é Flexbox?

Flexbox (Modelo de Caixa Flexível) é um modelo de layout unidimensional em CSS, destinado a distribuir espaço entre elementos num contêiner e oferecer capacidades poderosas de alinhamento. Permite gerir facilmente tamanhos, ordem e alinhamento dos elementos filhos (elementos flex) dentro do contêiner pai (contêiner flex), independentemente da sua ordem ou tamanhos originais.

Conceitos-chave do Flexbox:

• Contêiner flex: Elemento com display: flex ou display: inline-flex. É neste contêiner que se definem as regras de layout para os seus elementos filhos diretos.
• Elementos flex: Elementos filhos diretos do contêiner flex. São aplicadas propriedades do Flexbox que determinam o seu comportamento dentro do contêiner.
• Eixo principal (main axis): Eixo ao longo do qual os elementos flex são dispostos. Por padrão é horizontal (da esquerda para a direita), mas pode ser alterado com flex-direction.
• Eixo transversal (cross axis): Eixo perpendicular ao eixo principal.
• Início principal (main start) / Fim principal (main end): Início e fim ao longo do eixo principal.
• Início transversal (cross start) / Fim transversal (cross end): Início e fim ao longo do eixo transversal.

Propriedades principais do Flexbox para o contêiner flex:

• display: Define que o elemento é um contêiner flex (flex ou inline-flex).
• flex-direction: Define a direção do eixo principal (row, row-reverse, column, column-reverse).
• flex-wrap: Define se os elementos flex irão envolver-se numa nova linha/coluna se não houver espaço suficiente (nowrap, wrap, wrap-reverse).
• justify-content: Alinha os elementos flex ao longo do eixo principal (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Alinha os elementos flex ao longo do eixo transversal (flex-start, flex-end, center, baseline, stretch).
• align-content: Alinha as linhas de elementos flex (se houver várias devido ao flex-wrap) ao longo do eixo transversal.

Propriedades principais do Flexbox para os elementos flex:

• order: Define a ordem de exibição do elemento flex (padrão 0).
• flex-grow: Coeficiente de crescimento do elemento flex, que determina quanto pode aumentar para preencher o espaço disponível.
• flex-shrink: Coeficiente de encolhimento do elemento flex, que determina quanto pode diminuir para evitar transbordamento.
• flex-basis: Tamanho inicial do elemento flex antes da distribuição do espaço livre.
• flex: Abreviação de flex-grow, flex-shrink e flex-basis.
• align-self: Redefine align-items para um elemento flex específico.

Exemplo de uso:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Torna o contêiner flexível */
  justify-content: center; /* Alinha os elementos ao centro do eixo principal */
  align-items: center; /* Alinha os elementos ao centro do eixo transversal */
  height: 200px; /* Para demonstração do alinhamento */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Vantagens principais do Flexbox:

• Alinhamento fácil de elementos horizontal e vertical.
• Distribuição flexível do espaço entre elementos.
• Mudança fácil da ordem dos elementos.
• Design responsivo sem uso de float e position.
• Boa compatibilidade com navegadores modernos.