O que é Flexbox?

Flexbox (Flexible Box Layout) é um módulo CSS destinado à criação de layouts complexos e responsivos. Permite gerir a disposição, alinhamento e distribuição do espaço entre os elementos do contêiner, mesmo que os seus tamanhos sejam desconhecidos ou dinâmicos.

Conceitos principais do Flexbox:

• Eixo principal (main axis): Eixo ao longo do qual os elementos são dispostos. Por padrão, horizontal (da esquerda para a direita).
• Eixo transversal (cross axis): Eixo perpendicular ao eixo principal. Por padrão, vertical (de cima para baixo).
• Contêiner (flex container): Elemento ao qual se aplicam as propriedades Flexbox (display: flex ou display: inline-flex).
• Itens (flex items): Elementos filhos do contêiner.

Propriedades para o contêiner Flex:

• display: 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 devem envolver-se numa nova linha (nowrap, wrap, wrap-reverse)
• justify-content: Alinhamento dos elementos ao longo do eixo principal (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Alinhamento dos elementos ao longo do eixo transversal (flex-start, flex-end, center, baseline, stretch)
• align-content: Alinhamento das linhas ou colunas ao longo do eixo transversal num contêiner de várias linhas (flex-start, flex-end, center, space-between, space-around, stretch)

Propriedades para os itens Flex:

• order: Define a ordem do item no contêiner
• flex-grow: Define quanto o item deve crescer para ocupar o espaço disponível
• flex-shrink: Define quanto o item deve encolher se o espaço for insuficiente
• flex-basis: Define o tamanho inicial do item antes de distribuir o espaço
• flex: Propriedade abreviada para flex-grow, flex-shrink e flex-basis
• align-self: Redefine o alinhamento do item ao longo do eixo transversal (flex-start, flex-end, center, baseline, stretch, auto)

Exemplo de uso:

/* Contêiner */
.container {
  display: flex; /* Ativa Flexbox */
  flex-direction: row; /* Disposição em linha */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  height: 200px; /* Altura do contêiner */
  border: 1px solid black;
}

/* Itens */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox simplifica bastante a criação de layouts responsivos em comparação com métodos tradicionais (float, inline-block, table).