Para que é usado flex no CSS?

O Flexbox é utilizado para criar distribuições unidimensionais de elementos num contêiner. Permite gerir o alinhamento, a distribuição do espaço e a ordem dos elementos.

Conceitos principais:

• Contêiner Flex: Elemento pai ao qual se atribui display: flex ou display: inline-flex.
• Itens Flex: Elementos filhos do Contêiner Flex.
• Eixo Principal: Eixo principal do Contêiner Flex. Definido pela propriedade flex-direction. Por padrão é horizontal (row).
• Eixo Cruzado: Eixo perpendicular ao Eixo Principal.

Propriedades-chave 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).
• 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 cruzado (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Define se os elementos flex devem envolver em uma nova linha/coluna quando não há espaço suficiente (nowrap, wrap, wrap-reverse).

Propriedades-chave para os Itens Flex:

• order: Define a ordem visual do item flex (padrão 0).
• flex-grow: Define quanto um item flex pode crescer em relação aos outros (padrão 0).
• flex-shrink: Define quanto um item flex pode encolher em relação aos outros (padrão 1).
• flex-basis: Define o tamanho inicial do item flex antes de distribuir o espaço livre (padrão auto).
• align-self: Sobrescreve o alinhamento do item flex ao longo do eixo cruzado para um item específico.

Exemplo de uso:

.container {
  display: flex;
  justify-content: center; /* Alinhamento ao centro ao longo do eixo principal */
  align-items: center; /* Alinhamento ao centro ao longo do eixo cruzado */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Isto permite facilmente centralizar elementos, criar grades responsivas e gerir o espaço entre elementos.