O Flexbox, ou Módulo de Caixa Flexível, é um modelo de layout em CSS3 projetado para dispor itens em uma única dimensão — seja em linha ou coluna. Ele oferece uma maneira eficiente de organizar, alinhar e distribuir espaço entre os itens dentro de um contêiner, mesmo quando os tamanhos desses itens são desconhceidos ou dinâmicos. Isso o torna uma ferramenta indispensável para a criação de interfaces web modernas e responsivas.

A necessidade de layouts adaptáveis tornou-se primordial com a proliferação de dispositivos de diversas dimensões, desde pequenos smartphones até monitores de alta resolução. Técnicas tradicionais como floats e posicionamento, embora eficazes para layouts estáticos de PC, frequentemente falham em proporcionar a fluidez e a flexibilidade exigidas por designs responsivos. O Flexbox simplifica desafios comuns de layout, como centralização vertical e horizontal, distribuição de espaço e reordenação de itens, com um mínimo de CSS.

Conceitos Fundamentais do Flexbox

Ao aplicar display: flex a um elemento, ele se transforma em um Contêiner Flexível (flex container). Seus filhos diretos automaticamente se tornam Itens Flexíveis (flex items). O Flexbox opera em torno de dois eixos principais:

• Eixo Principal (Main Axis): O eixo primário ao longo do qual os itens flexíveis são dispostos. A direção deste eixo é definida pela propriedade flex-direction.
• Eixo Transversal (Cross Axis): O eixo perpendicular ao eixo principal.

Cada eixo possui um início (start) e um fim (end). O espaço que um item flexível ocupa no eixo principal é chamado de main size, e no eixo transversal, de cross size.

Propriedades do Contêiner Flexível

As propriedades aplicadas ao contêiner flexível controlam a disposição geral e o alinhamento de seus itens.

1. Ativando o Layout Flex: display: flex ou display: inline-flex

Esta é a propriedade inicial para habilitar o contexto Flexbox para os filhos diretos do elemento. O valor flex cria um contêiner de bloco flexível, enquanto inline-flex cria um contêiner de linha flexível.

<style>
    .container-flex {
      display: flex; /* Ativa o Flexbox */
      width: 400px;
      height: 200px;
      background-color: lightcoral;
      border: 2px solid darkred;
    }
    .item-flex {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      border: 1px solid steelblue;
      color: #333;
      display: flex; /* Para centralizar o texto dentro do item */
      justify-content: center;
      align-items: center;
    }
</style>
<div class="container-flex">
  <div class="item-flex">Item 1</div>
  <div class="item-flex">Item 2</div>
  <div class="item-flex">Item 3</div>
</div>

Por padrão, ao ativar o Flexbox, os itens são dispostos horizontalmente em linha (row) e não quebram linha. Isso difere do comportamento padrão de elementos de bloco, que ocupariam a largura total e se empilhariam verticalmente.

2. Direção do Eixo Principal: flex-direction

Esta propriedade define a direção do eixo principal, que dita como os itens flexíveis são dispostos dentro do contêiner.

• row (padrão): Itens dispostos horizontalmente, da esquerda para a direita.
• row-reverse: Itens dispostos horizontalmente, da direita para a esquerda.
• column: Itens dispostos verticalmente, de cima para baixo.
• column-reverse: Itens dispostos verticalmente, de baixo para cima.

.container-flex {
    display: flex;
    flex-direction: row; /* Ou row-reverse, column, column-reverse */
    width: 400px;
    height: 200px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
/* ... .item-flex styles ... */

O flex-direction não apenas altera a orientação dos itens, mas também a sua origem e fim no layout, o que é crucial para designs que precisam de inversão de ordem ou empilhamento vertical.

3. Quebra de Linha dos Itens: flex-wrap

Define se os itens flexíveis devem quebrar para uma nova linha ou coluna quando não há espaço suficiente no contêiner.

• nowrap (padrão): Todos os itens permanecem em uma única linha, podendo haver encolhimento para caber.
• wrap: Os itens quebram para novas linhas/colunas conforme necessário.
• wrap-reverse: Os itens quebram para novas linhas/colunas, mas a ordem das linhas/colunas é invertida.

.container-flex {
    display: flex;
    flex-wrap: wrap; /* Permite quebra de linha */
    width: 300px; /* Largura reduzida para forçar a quebra */
    height: 250px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 100px; /* Itens com largura definida */
    height: 60px;
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

Note que, ao usar flex-wrap: wrap, um espaçamento indesejado pode aparecer entre as linhas. Isso geralmente é corrigido com a propriedade align-content, que será explicada adiante.

4. Alinhamento no Eixo Principal: justify-content

Esta propriedade distribui o espaço disponível entre e ao redor dos itens flexíveis ao longo do eixo principal do contêiner.

• flex-start (padrão): Itens agrupados no início do eixo principal.
• flex-end: Itens agrupados no fim do eixo principal.
• center: Itens centralizados no eixo principal.
• space-between: O primeiro item fica no início, o último no fim, e o espaço restante é distribuído uniformemente entre eles.
• space-around: O espaço é distribuído uniformemente ao redor de cada item. Os espaços nas extremidades são metade do espaço entre os itens.
• space-evenly: O espaço é distribuído uniformemente entre os itens, incluindo as extremidades.

.container-flex {
    display: flex;
    justify-content: space-between; /* Exemplo de valor */
    width: 450px;
    height: 100px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 80px; /* Itens com largura definida */
    height: 50px;
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

É uma ferramenta poderosa para criar barras de navegação, layouts de galeria e outros componentes onde o espaçamento horizontal é crucial.

5. Alinhamento em Linha Única no Eixo Transversal: align-items

Controla como os itens flexíveis são alinhados ao longo do eixo transversal dentro de uma única linha do contêiner flexível.

• stretch (padrão): Itens esticados para preencher o contêiner no eixo transversal (se não tiverem altura/largura explícita).
• flex-start: Itens alinhados com o início do eixo transversal.
• flex-end: Itens alinhados com o fim do eixo transversal.
• center: Itens centralizados no eixo transversal.
• baseline: Itens alinhados com suas baselines (linha de base do texto).

.container-flex {
    display: flex;
    align-items: center; /* Exemplo de valor */
    width: 400px;
    height: 200px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 100px;
    /* Remover height para ver stretch, ou manter para outros valores */
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-flex:nth-child(2) {
    padding-top: 15px; /* Para demonstrar align-items: baseline */
}

Esta propriedade é fundamental para centralizar itens verticalmente ou garantir que eles ocupem a altura total do contêiner.

6. Alinhamento de Múltiplas Linhas no Eixo Transversal: align-content

Esta propriedade funciona como justify-content, mas para o eixo transversal, e só se aplica quando há múltiplas linhas de itens (ou seja, flex-wrap é wrap ou wrap-reverse).

• stretch (padrão): As linhas são esticadas para ocupar o espaço disponível.
• flex-start: Linhas agrupadas no início do eixo transversal.
• flex-end: Linhas agrupadas no fim do eixo transversal.
• center: Linhas centralizadas no eixo transversal.
• space-between: A primeira linha fica no início, a última no fim, e o espaço restante é distribuído uniformemente entre as linhas.
• space-around: O espaço é distribuído uniformemente ao redor de cada linha.
• space-evenly: O espaço é distribuído uniformemente entre as linhas, incluindo as extremidades.

.container-flex {
    display: flex;
    flex-wrap: wrap; /* Essencial para align-content */
    align-content: space-around; /* Exemplo de valor */
    width: 350px;
    height: 300px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 100px;
    height: 70px; /* Altura definida para não esticar */
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

Se houver apenas uma linha de itens flexíveis, align-content não terá efeito.

Propriedades dos Itens Flexíveis

As propriedades aplicadas diretamente aos itens flexíveis permitem controlar seu comportamento individual dentro do contêiner.

1. Ordem dos Itens: order

A propriedade order permite alterar a ordem visual dos itens flexíveis, independentemente de sua ordem no documento HTML. O valor padrão é 0. Itens com valores menores aparecem primeiro.

<style>
    .container-flex {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
      height: 200px;
      background-color: lightcoral;
      border: 2px solid darkred;
    }
    .item-flex {
      width: 80px;
      height: 50px;
      background-color: lightblue;
      border: 1px solid steelblue;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #item-b {
      order: -1; /* Aparecerá antes do Item A (order 0) */
    }
    #item-c {
      order: 2; /* Aparecerá depois de Item A e Item B (se fosse 0) */
    }
</style>
<div class="container-flex">
  <div class="item-flex">Item A</div>
  <div class="item-flex" id="item-b">Item B</div>
  <div class="item-flex" id="item-c">Item C</div>
  <div class="item-flex">Item D</div>
</div>

Esta propriedade é extremamente útil para layouts responsivos onde a ordem do conteúdo precisa ser ajustada em diferentes tamanhos de tela.

2. Capacidade de Crescimento: flex-grow

Define a capacidade de um item flexível de crescer, distribuindo o espaço livre do contêiner. O valor padrão é 0 (o item não cresce).

Aceita valores numéricos não negativos. Se a soma dos flex-grow de todos os itens for maior que 0, o espaço restante no contêiner será dividido entre eles proporcionalmente aos seus valores de flex-grow.

.container-flex {
    display: flex;
    width: 500px;
    height: 100px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 80px; /* Largura inicial */
    height: 50px;
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
#item-dois {
    flex-grow: 1; /* Ocupa 1 parte do espaço restante */
}
#item-tres {
    flex-grow: 3; /* Ocupa 3 partes do espaço restante */
}

Exemplo prático: Para evitar espaçamento excessivo na última linha de um layout space-between com poucos itens, pode-se adicionar um item "fantasma" invisível com flex-grow: 1 no final. Ele ocupará o espaço restante, mantendo o alinhamento dos itens visíveis.

<style>
    .container-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 400px;
        height: 200px;
        background-color: lightcoral;
        border: 2px solid darkred;
    }
    .tag-item {
        padding: 5px 10px;
        margin-bottom: 5px; /* Espaço entre linhas */
        background-color: lightblue;
        border: 1px solid steelblue;
        color: #333;
        font-size: 14px;
    }
    .tag-ghost {
        flex-grow: 1;
        visibility: hidden; /* Torna o item invisível */
    }
</style>
<div class="container-tags">
    <div class="tag-item">CSS</div>
    <div class="tag-item">JavaScript</div>
    <div class="tag-item">HTML5</div>
    <div class="tag-item">Web Dev</div>
    <div class="tag-item">Flexbox</div>
    <div class="tag-item">Responsive</div>
    <!-- Item fantasma para alinhar a última linha -->
    <div class="tag-ghost"></div>
</div>

3. Capacidade de Encolhimento: flex-shrink

Define a capacidade de um item flexível de encolher caso não haja espaço suficiente no contêiner. O valor padrão é 1 (o item encolhe conforme necessário).

Aceita valores numéricos não negativos. Se o espaço total dos itens exceder a largura do contêiner, os itens com flex-shrink maior encolherão mais proporcionalmente.

.container-flex {
    display: flex;
    width: 300px; /* Contêiner pequeno para forçar encolhimento */
    height: 100px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 100px; /* Largura base que causaria overflow */
    height: 50px;
    flex-shrink: 1; /* Padrão, encolhe */
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
#item-largura-fixa {
    width: 120px;
    flex-shrink: 0; /* Não encolhe */
}
#item-mais-encolhe {
    width: 150px;
    flex-shrink: 2; /* Encolhe duas vezes mais que os outros */
}

Um valor de 0 impede que o item encolha, mantendo sua largura/altura inicial, mesmo que isso cause um estouro de layout.

4. Tamanho Base do Item: flex-basis

Define o tamanho inicial de um item flexível no eixo principal antes que qualquer crescimento (flex-grow) ou encolhimento (flex-shrink) ocorra.

• auto (padrão): O tamanho é determinado pela propriedade width ou height do item, ou pelo seu conteúdo.
• <length> (ex: 100px, 25%): Define um tamanho fixo.
• content: O tamanho é baseado no conteúdo do item.

.container-flex {
    display: flex;
    width: 400px;
    height: 100px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    /* width: 80px; */ /* Esta largura seria ignorada se flex-basis fosse diferente de auto */
    height: 50px;
    flex-basis: 100px; /* Define o tamanho inicial no eixo principal */
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
#item-com-conteudo {
    flex-basis: content;
    background-color: lightgreen;
}

É importante notar que flex-basis tem precedência sobre width (ou height, dependendo do flex-direction) quando ambos são especificados.

5. Propriedade Abreviada: flex

A propriedade flex é um atalho para flex-grow, flex-shrink e flex-basis. A ordem é flex: <flex-grow> <flex-shrink> <flex-basis>.

Valores comuns:

• flex: auto: Equivalente a flex: 1 1 auto. O item pode crescer e encolher, com base inicial no seu tamanho ou conteúdo.
• flex: initial: Equivalente a flex: 0 1 auto. (Padrão) O item não cresce, mas pode encolher.
• flex: none: Equivalente a flex: 0 0 auto. O item não cresce nem encolhe, mantendo seu tamanho inicial.
• flex: <número> (ex: flex: 1): Define flex-grow. flex-shrink e flex-basis usam seus valores padrão (1 e 0%, ou auto dependendo do contexto). Ex: flex: 1 geralmente equivale a flex: 1 1 0%.
• flex: <comprimento | porcentagem> (ex: flex: 150px, flex: 30%): Define flex-basis. flex-grow e flex-shrink usam seus valores padrão (1 e 1).

Exemplo: Layout de Duas Colunas

<style>
    .layout-wrapper {
      display: flex;
      width: 500px;
      height: 150px;
      background-color: lightcoral;
      border: 2px solid darkred;
    }
    .coluna-fixa {
      width: 150px; /* Largura fixa */
      background-color: lightblue;
      border: 1px solid steelblue;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .coluna-adaptativa {
      flex: 1; /* Cresce para preencher o espaço restante */
      background-color: lightgreen;
      border: 1px solid darkgreen;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>
<div class="layout-wrapper">
  <div class="coluna-fixa">Menu Lateral</div>
  <div class="coluna-adaptativa">Conteúdo Principal</div>
</div>

Exemplo: Grid Adaptativo de Itens

<style>
    .grid-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; /* Distribui espaço entre itens */
      width: 400px;
      height: 200px;
      background-color: lightcoral;
      border: 2px solid darkred;
    }
    .grid-item {
      box-sizing: border-box; /* Inclui padding e borda na largura total */
      flex: 0 0 calc(33.33% - 10px); /* 3 itens por linha com espaço */
      margin-bottom: 10px; /* Espaço entre as linhas */
      height: 60px;
      background-color: lightblue;
      border: 1px solid steelblue;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>
<div class="grid-container">
  <div class="grid-item">Box 1</div>
  <div class="grid-item">Box 2</div>
  <div class="grid-item">Box 3</div>
  <div class="grid-item">Box 4</div>
  <div class="grid-item">Box 5</div>
  <div class="grid-item">Box 6</div>
</div>

6. Alinhamento Individual no Eixo Transversal: align-self

Permite sobrescrever o alinhamento padrão (definido por align-items no contêiner) para um item flexível específico no eixo transversal.

• auto (padrão): Herda o valor de align-items do pai.
• flex-start: Alinha o item com o início do eixo transversal.
• flex-end: Alinha o item com o fim do eixo transversal.
• center: Alinha o item no centro do eixo transversal.
• baseline: Alinha o item com sua baseline.
• stretch: Estica o item para preencher o contêiner.

.container-flex {
    display: flex;
    align-items: flex-start; /* Alinhamento padrão para os itens */
    width: 400px;
    height: 200px;
    background-color: lightcoral;
    border: 2px solid darkred;
}
.item-flex {
    width: 80px;
    height: 50px;
    background-color: lightblue;
    border: 1px solid steelblue;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
#item-centro {
    align-self: center; /* Sobrescreve align-items */
    background-color: lightgreen;
}
#item-fim {
    align-self: flex-end; /* Sobrescreve align-items */
    background-color: lightsalmon;
}

align-self é ideal para ajustar o posicionamento de um único item que precise de um alinhamento diferente do restante dos elementos da linha.