Para que é que o Flexbox é utilizado?

O Flexbox é utilizado para criar layouts flexíveis e responsivos em CSS. Permite alinhar e distribuir facilmente os elementos dentro do contêiner, ajustando automaticamente seus tamanhos e posições de acordo com o espaço disponível.

Conceitos principais do Flexbox:

• Contêiner Flex: Elemento ao qual se aplica display: flex; ou display: inline-flex;. Ele contém elementos flex.
• Elementos Flex: Filhos diretos do contêiner flex.

O Flexbox permite controlar:

• A direção de disposição dos elementos (flex-direction).
• A quebra de linha/coluna dos elementos (flex-wrap).
• O alinhamento dos elementos ao longo do eixo principal (justify-content).
• O alinhamento dos elementos ao longo do eixo transversal (align-items para elementos individuais e align-content para múltiplas linhas/colunas).
• A ordem de exibição dos elementos (order).
• A distribuição do espaço livre entre os elementos (flex-grow, flex-shrink, flex-basis).

Exemplo de uso básico:

.conteiner {
  display: flex;
  justify-content: center; /* Alinhamento ao centro horizontalmente */
  align-items: center; /* Alinhamento ao centro verticalmente */
}

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

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