Flexbox CSS

Tempo de leitura: 4 minutos

Flexbox CSS: O CSS Flexbox (Flexible Box Module) é um modelo de layout revolucionário, ideal para organizar, alinhar e distribuir itens dentro de um contêiner em uma única dimensão (linha ou coluna).

Enquanto o CSS Grid é perfeito para o layout de página bidimensional, o Flexbox é o padrão da indústria para alinhar componentes (como botões, menus de navegação, ou elementos de formulário) de forma eficiente e responsiva.

Neste artigo, exploraremos a anatomia do Flexbox e as propriedades que regem seu comportamento, divididas entre o Contêiner (Pai) e os Itens (Filhos).

1. Conceitos Fundamentais e Eixos

O Flexbox baseia-se em dois eixos, e todas as propriedades de alinhamento atuam sobre eles:

Conceito	Definição
Contêiner Flex	O elemento pai que define o contexto de Flexbox (`display: flex`).
Itens Flex	Os filhos diretos do Contêiner.
Eixo Principal	A direção primária em que os itens são dispostos (padrão: horizontal/linha). Controlado por `flex-direction`.
Eixo Cruzado	A direção perpendicular ao Eixo Principal (padrão: vertical/coluna).

🔑 Iniciação do Flexbox

Para começar, você define o Contêiner:

CSS

.container {
  display: flex; /* Transforma o elemento em um container flexível */
}

2. Propriedades do Contêiner Flex (Pai)

Estas propriedades controlam a orientação dos eixos e a distribuição do espaço.

A. Controle dos Eixos (`flex-direction` e `flex-wrap`)

Propriedade	Função	Valores Comuns	Efeito
`flex-direction`	Define a direção do Eixo Principal.	`row` (padrão), `column`, `row-reverse`	Altera a direção de organização (horizontal ou vertical).
`flex-wrap`	Define se os itens devem quebrar para a próxima linha/coluna.	`nowrap` (padrão), `wrap`	Se a largura for excedida, `wrap` move itens para a próxima linha/coluna.
`flex-flow`	Shorthand para `direction` e `wrap`.	`row wrap`	Define a direção e permite a quebra em uma única linha.

B. Alinhamento no Eixo Principal (`justify-content`)

Controla como o espaço livre é distribuído entre e ao redor dos itens ao longo do Eixo Principal (a direção de flex-direction).

Valor	Alinhamento/Distribuição
`flex-start`	Agrupa os itens no início do eixo.
`center`	Centraliza os itens agrupados no eixo.
`space-between`	Distribui o espaço igualmente entre os itens (bordas fixas).
`space-evenly`	Distribui o espaço igualmente ao redor de cada item (melhor distribuição visual).

C. Alinhamento no Eixo Cruzado (`align-items`)

Controla o alinhamento dos itens perpendicularmente ao Eixo Principal (o Eixo Cruzado).

Valor	Alinhamento/Distribuição
`stretch`	Padrão. Estica os itens para preencher toda a altura/largura disponível no eixo cruzado.
`flex-start`	Agrupa os itens no início do eixo cruzado.
`center`	Centraliza os itens no meio do eixo cruzado (ótimo para centralização vertical).
`baseline`	Alinha os itens pela linha de base do conteúdo de texto.

3. Propriedades dos Itens Flex (Filhos)

Estas propriedades afetam o item individualmente.

A. `flex` (Grow, Shrink e Basis)

A propriedade flex é uma shorthand poderosa para controlar como o item se dimensiona dentro do espaço livre:

flex: [flex-grow] [flex-shrink] [flex-basis]

Componente	Função	Exemplo
`flex-grow`	Capacidade de o item crescer e consumir espaço extra.	`1` (cresce na mesma proporção dos outros)
`flex-shrink`	Capacidade de o item encolher para evitar overflow.	`0` (não encolhe de forma alguma)
`flex-basis`	Tamanho inicial do item antes de crescer/encolher.	`auto` ou `200px`

Melhor Prática: O uso mais comum é flex: 1 (que equivale a 1 1 auto), fazendo com que o item cresça e encolha automaticamente.

B. Alinhamento e Ordem

Propriedade	Função
`order`	Define a ordem de exibição do item (padrão é `0`). Valores positivos/negativos reordenam os itens, independentemente da ordem no HTML.
`align-self`	Substitui o alinhamento vertical (`align-items`) do Container para este item específico.

✅ Conclusão Flexbox CSS

O Flexbox é a ferramenta definitiva para o alinhamento unidimensional. Ele transforma a organização de barras de navegação, formulários e componentes em uma tarefa simples e intuitiva, eliminando a complexidade dos floats e position. Ao diferenciar as propriedades do Contêiner (para distribuição geral) e dos Itens (para dimensionamento individual), você dominará rapidamente a criação de interfaces responsivas e robustas.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: