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 a1 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:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
