Propriedade de Layout Flex
Última atualização: 2026-09-13
flex Propriedade de Layout Flex
A propriedade flex é o atalho central do módulo CSS Flexible Box Layout. Ela define como um item flex cresce, encolhe e quanto espaço ocupa em relação ao espaço restante no container. É um atalho para flex-grow, flex-shrink e flex-basis, que controlam o fator de crescimento, o fator de encolhimento e o tamanho inicial no eixo principal do item. Com flex, layouts comuns como colunas de largura igual, larguras fluidas e arranjos fluidos são fáceis de construir.
| Categoria | |
|---|---|
| Valor Inicial | 0 1 auto |
| Herdado | Não |
| Aplica-se A | itens flex |
| Tipo de Animação | length |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex: none | auto | initial | <flex-grow> <flex-shrink>? <flex-basis>?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | auto | initial | Palavra-chave | Valores flex predefinidos. |
<flex-grow> <flex-shrink>? <flex-basis>? | Valor | Valores de flex-grow/flex-shrink/flex-basis. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： flex: 1; é um atalho para flex: 1 1 0%. O item pode crescer e encolher e parte de um tamanho base 0, que é o modo típico de fazer os itens dividirem o espaço restante igualmente.
Aviso： flex: none; é equivalente a flex: 0 0 auto. O item não cresce nem encolhe e é dimensionado puramente pelo conteúdo ou por uma width/height explícita. Use para barras laterais ou botões de tamanho fixo.
❓ Perguntas Frequentes
QQual é a diferença entre flex: 1 e flex: auto?
Aflex: 1 é atalho para flex: 1 1 0%. O tamanho base é 0, então toda a largura é redistribuída proporcionalmente e vários itens flex: 1 ficam com largura estritamente igual. flex: auto é atalho para flex: 1 1 auto: cada item é primeiro dimensionado pelo conteúdo ou width, e então o espaço restante é compartilhado proporcionalmente, então itens com mais conteúdo ocupam mais espaço. Use flex: 1 para divisões de largura igual e flex: auto quando quiser que os tamanhos sigam o conteúdo.
QQuando devo usar o atalho flex em vez das sub-propriedades individuais?
ANa maioria dos casos o atalho flex é a melhor escolha porque define flex-grow, flex-shrink e flex-basis em uma única declaração e evita a surpresa de flex-basis voltar ao padrão 0 quando você escreve apenas flex-grow. Ele também comunica a intenção de imediato, tornando o tamanho base explícito e mais fácil de revisar do que três declarações espalhadas. Use as propriedades longas apenas quando precisar sobrescrever uma única sub-propriedade, por exemplo alterando só flex-basis dentro de uma media query.
QPor que o texto dentro de itens flex: 1 quebra ou fica espremido?
AIsso é causado pelo padrão min-width: auto dos itens flex: quando o espaço acaba, o tamanho mínimo do item é derivado do conteúdo, então um texto longo mantém o item largo e o texto quebra ou transborda. Corrija definindo min-width: 0 no item (min-height: 0 para a direção column) e combine com overflow: hidden e text-overflow: ellipsis para obter truncamento em uma linha.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Flex Grow
Controla quanto um item flex cresce.
Direção do Eixo Principal
Define a direção do eixo principal em um layout flex.
