Padrões da Forma Abreviada de flex
Domine a forma abreviada de flex e compreenda valores comuns como flex: 1, flex: none e flex: auto.
Padrões da Forma Abreviada de flex é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Revisitando a abreviação flex
A abreviação flex define flex-grow, flex-shrink e flex-basis em uma única declaração. Entender as variantes da abreviação é essencial para criar layouts do mundo real.
flex: 1
flex: 1 equivale a flex: 1 1 0%. Os itens começam com base zero e crescem igualmente para preencher o espaço disponível. Esta é a abreviação mais comum para colunas de tamanho igual.
<div class="equal-cols">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
flex: auto
flex: auto = flex: 1 1 auto. Os itens começam com o tamanho natural do conteúdo e depois crescem ou encolhem proporcionalmente. Conteúdos mais largos recebem mais espaço ao crescer.
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
</div>
flex: none
flex: none = flex: 0 0 auto. O item é rígido — não cresce nem encolhe. O tamanho é determinado pela largura natural do conteúdo ou por uma largura/altura explícita.
<div class="row">
<div class="logo">Logo</div>
<div>Flexible content</div>
</div>
flex: 0 0 Xpx
Um item de tamanho fixo e não flexível. Esta é a forma mais explícita de criar painéis de barra lateral com larguras exatas:
<div class="layout">
<div class="sidebar-left">Left</div>
<div class="main-content">Main</div>
<div class="sidebar-right">Right</div>
</div>
flex: 1 vs flex: 1 1 auto
A diferença principal: com flex: 1 (base de 0%), todos os itens começam em 0 e crescem proporcionalmente. Com flex: 1 1 auto, os itens começam com o tamanho natural do conteúdo e depois crescem. Isso afeta a distribuição do espaço restante.
Proporção flex: 2
Use valores de flex-grow diferentes de forma a obter distribuições proporcionais:
<div class="split">
<div class="main">Main (2/3)</div>
<div class="side">Side (1/3)</div>
</div>
Combinando itens fixos e flexíveis
O padrão mais comum em projetos reais: barra lateral fixa + conteúdo principal flexível:
<div class="layout">
<div class="sidebar">Sidebar 280px</div>
<div class="content">Flexible content</div>
</div>
Truque flex com min-width: 0
Os itens flex têm min-width: auto por padrão. Isso pode impedi-los de encolher abaixo do tamanho do conteúdo. Defina min-width: 0 nos itens que devem encolher livremente, como contêineres de texto com truncamento.
<div class="row">
<div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>
Padrão de grade de cartões
Grade de cartões responsiva com cartões flexíveis, mas limitados:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Depurando a abreviação flex
Use o DevTools do navegador para inspecionar os valores calculados de flex-grow, flex-shrink e flex-basis. A sobreposição do inspetor do Flexbox também mostra visualmente o espaço livre e os tamanhos dos itens.
Verificação rápida
Para o que flex: auto se expande?
Recapitulação
Memorize as principais abreviações flex: flex: 1 (colunas iguais a partir de zero), flex: auto (cresce a partir do tamanho natural), flex: none (rígido), flex: 0 0 Xpx (tamanho fixo). Use min-width: 0 nos filhos flex que contêm texto com truncamento. Combine itens fixos e flexíveis para criar layouts clássicos com barra lateral.
Perguntas Frequentes
A aula “Padrões da Forma Abreviada de flex” é grátis?
Sim — o texto completo de “Padrões da Forma Abreviada de flex” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Padrões da Forma Abreviada de flex”?
Domine a forma abreviada de flex e compreenda valores comuns como flex: 1, flex: none e flex: auto. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Padrões da Forma Abreviada de flex”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Substituição do Alinhamento de Itens Flex com align-self
- Propriedade order e Reordenação Visual
- Padrões da Forma Abreviada de flex
- Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia