O Flexbox (Flexible Box Layout) é um modelo de layout unidimensional que revolucionou a forma como distribuímos espaço e alinhamos itens em interfaces web. Diferente dos métodos tradicionais baseados em floats ou posicionamento, o Flexbox oferece um controle dinâmico sobre a ordem, o tamanho e o alinhamento dos elementos, independentemente das dimensões da tela.

Estrutura Inicial do Documento

Para implementar um layout flexível, começamos definindo uma estrutura HTML básica onde um elemento pai atua como o container e seus filhos diretos tornam-se itens flexíveis.

<div class="container-principal">
    <div class="item-bloco">Bloco A</div>
    <div class="item-bloco">Bloco B</div>
    <div class="item-bloco">Bloco C</div>
</div>

No arquivo CSS, configuramos as propriedades do container. A ativação do modelo ocorre através da propriedade display: flex;.

.container-principal {
    display: flex;
    width: 100%;
    max-width: 800px;
    height: 500px;
    border: 4px solid #2c3e50;
    background-color: #ecf0f1;
}

Orientação com Flex-Direction

A propriedade flex-direction define o eixo principal do container, determinando a direção em que os itens serão posicionados.

• row: Padrão. Os itens são organizados horizontalmente, da esquerda para a direita.
• row-reverse: Itens em linha, mas da direita para a esquerda.
• column: Os itens são empilhados verticalmente.
• column-reverse: Empilhamento vertical de baixo para cima.

Alinhamento no Eixo Principal (Justify-Content)

Para distribuir os itens ao longo do eixo definido pelo flex-direction, utilizamos o justify-content. Isso é essencial para gerenciar espaços vazios.

.container-principal {
    display: flex;
    justify-content: space-between; /* Itens nas extremidades com espaço entre eles */
}

Opções comuns incluem:

• flex-start: Itens agrupados no início do eixo.
• flex-end: Itens agrupados no final do eixo.
• center: Itens centralizados no container.
• space-around: Distribui o espaço uniformemente ao redor de cada item.

Alinhamento no Eixo Cruzado (Align-Items)

Enquanto o justify-content cuida do eixo principal, o align-items gerencia o alinhamento no eixo perpendicular (eixo cruzado).

• stretch: Padrão. Os itens esticam para preencher o container.
• center: Centraliza os itens verticalmente (se o eixo principal for horizontal).
• flex-start: Alinha os itens no topo do eixo cruzado.
• flex-end: Alinha os itens na base do eixo cruzado.
• baseline: Alinha os itens conforme a linha de base do texto.

Gerenciamento de Quebras com Flex-Wrap

Por padrão, o Flexbox tenta encaixar todos os itens em uma única linha. A propriedade flex-wrap permite que os itens passem para a próxima linha caso o espaço seja insuficiente.

.container-principal {
    display: flex;
    flex-wrap: wrap; /* Permite a quebra de linha dos itens */
}

Valores possíveis:

• nowrap: Todos os itens ficam em uma linha (padrão).
• wrap: Itens quebram para múltiplas linhas de cima para baixo.
• wrap-reverse: Itens quebram para múltiplas linhas de baixo para cima.

Estilização Específica com Seletores Pseudo-Classe

Muitas vezes precisamos destacar ou modificar um item específico dentro do container flexível sem adicionar novas classes. O seletor nth-child é ideal para essa finalidade.

/* Aplica uma cor de fundo diferente apenas ao segundo item */
.item-bloco:nth-child(2) {
    background-color: #e67e22;
    flex-grow: 2; /* Faz este item crescer mais que os outros */
}

O uso conjunto dessas propriedades permite criar interfaces complexas e responsivas com poucas linhas de código, eliminando a dependência de cálculos manuais de margens e larguras.