Carregando...

Itens Flex CSS

Flex Container dirige o pai. Os itens flex respondem a outra pergunta: como cada filho cresce, encolhe e começa o tamanho nessa linha ou coluna? Domine basis, grow e shrink antes de correr atrás de padrões flex responsivos.

Uma caixa de ferramentas de itens flex

📊 Itens flex num relance

Propriedade Trabalho do dia a dia
flex-basis Tamanho principal inicial antes de distribuir o espaço livre
flex-grow Quanto espaço sobrante este item reclama (fator sem unidade)
flex-shrink Com que disposição este item encolhe quando o espaço aperta
flex Atalho para grow, shrink e basis
align-self Sobrescreve o align-items do contentor num único item
order Muda a ordem visual (use com parcimônia — mantenha DOM e acessibilidade sãos)

Pense em basis como o comprimento de partida preferido do item no eixo principal. Depois grow e shrink negociam o espaço livre ou em falta que resta.

flex-grow — tomar o espaço sobrante

Um fator de 1 deixa um item expandir-se no espaço livre. Fatores irmãos competem: dois itens com flex-grow: 1 dividem o resto em partes iguais.

Growing main column

css 
.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — partir de um tamanho

flex-basis define o tamanho principal inicial antes da matemática grow/shrink. Prefira basis para o algoritmo flex; width/height ainda importam, mas basis é o ponto de partida nativo do flex.

Sidebar with basis

css 
.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — devolver espaço

Quando a linha fica demasiado apertada, os fatores shrink decidem quem comprime. flex-shrink: 0 protege ícones ou carris fixos de serem esmagados.

Protect from squash

css 
.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

O atalho flex

flex: grow shrink basis empacota o trio. Defaults calmos comuns: flex: 1 (crescer, permitir encolher, basis auto) para um filho que preenche; flex: 0 0 auto para um chip rígido.

Flex shorthand

css 
.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — um item, outro alinhamento cruzado

Sobrescreva o align-items do contentor para um único filho. Útil quando um crachá deve colar no início enquanto os irmãos ficam centrados.

Align-self override

css 
.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

Um hábito calmo de item flex

Basis primeiro para o tamanho pretendido, depois fatores grow/shrink, depois o atalho para organizar. Use align-self com parcimônia. Evite truques de order que baralham o fluxo de teclado e leitor de ecrã — e deixe padrões flex com media queries para Flex Responsive.

Named item roles

css 
.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

Experimente você

  1. Faça uma linha main + aside; dê a main flex-grow: 1.
  2. Defina o aside com flex-basis: 14rem e flex-shrink: 0.
  3. Proteja um ícone com flex-shrink: 0.
  4. Reescreva grow/shrink/basis com o atalho flex.
  5. Sobrescreva o alinhamento cruzado de um filho com align-self.

Erros comuns

  • Colocar flex-grow no contentor em vez de num item
  • Confundir width com flex-basis e perguntar-se por que a matemática flex discorda
  • Reordenar com order e partir a ordem de tabulação/fonte
  • Deixar logótipos esmagarem-se porque shrink ficou no padrão
  • Tratar esta lição como o módulo Flex Responsive

Resumo

  • Itens flex controlam crescimento, encolhimento e basis inicial
  • flex-grow partilha espaço livre; flex-shrink partilha a compressão
  • flex-basis é o tamanho de partida flex no eixo principal
  • O atalho flex e align-self afinam filhos individuais
  • Padrões flex responsivos vêm a seguir; use order com cuidado

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 47 de 51
Css Tutorial