Guia do Flexbox: flex-grow, flex-shrink e flex-basis

Imagine que você tem uma prateleira flexível onde cada objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. pode ocupar mais ou menos espaço dependendo de certas regras. No FlexboxFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados., o controle de como cada item se ajusta ao espaço disponível funciona da mesma forma. Para isso, contamos com três propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. fundamentais: flex-grow, flex-shrink e flex-basis. Elas determinam se um item deve crescer, encolher ou ter um tamanho inicial específico dentro de um contêiner flex.

Contexto Geral🔗

Antes de tudo, lembre-se de que essas propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. são aplicadas diretamente em cada item do layout flex, e não no contêiner principal. Em outras palavras, você declara display: flexFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados.; no elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. pai, mas aplica flex-grow, flex-shrink e flex-basis nos filhos que ali se encontram.

flex-grow🔗

A propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. flex-grow define se (e como) um item deve crescer para ocupar espaço extra no contêiner. É medida em números inteiros ou fracionários, onde o valor padrão é 0 (zero). Quando seu valor é maior que zero, o item passa a ter capacidade de expandir, disputando espaço disponível com os demais itens conforme a proporção de seus valores de flex-grow.

Exemplo: Se você tem dois itens, sendo que um define flex-grow: 2 e o outro flex-grow: 1, e existe espaço extra no contêiner, o primeiro item crescerá o dobro do segundo.

.item-um {
  flex-grow: 2; /* Cresce o dobro em relação aos demais itens que têm flex-grow: 1 */
}
.item-dois {
  flex-grow: 1;
}

Na prática, o item .item-um ocupará mais espaço livre que o .item-dois, respeitando a proporção 2:1.

flex-shrink🔗

A propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. flex-shrink controla se (e como) um item deve encolher quando o espaço no contêiner não forEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação. suficiente para manter todos os tamanhos. Assim como o flex-grow, ela também funciona em proporções.

Exemplo: Caso você possua dois itens, sendo um com flex-shrink: 1 e outro com flex-shrink: 2, quando o espaço do contêiner ficar muito pequeno, o segundo item (com valor 2) encolherá o dobro do primeiro.

.item-um {
  flex-shrink: 1; /* Encolhe em menor proporção */
}
.item-dois {
  flex-shrink: 2; /* Encolhe em maior proporção */
}

Se, por algum motivo, você não quer que um item encolha, basta definir flex-shrink: 0;. Assim, aquele item preserva seu tamanho, mesmo que cause overflowOverflow e Controle de ConteúdoAprenda a controlar a propriedade overflow em CSS, dominando rolagem, ocultação de conteúdo e textos longos para layouts responsivos e acessíveis. ou outro comportamento inesperado.

flex-basis🔗

A propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. flex-basis indica o tamanho inicial que o item ocupará no contêiner flex, antes de ocorrer qualquer cálculo de crescimento ou encolhimento. Você pode defini-la em valores de comprimento (como px, em, %, etc.). É como dizer: “este item começa com tal larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. ou tal alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos., dependendo do eixo flex.”

Exemplo: Definindo flex-basis: 200px;, o item tentará ter 200px de larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. (se o flex-directionFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados. forEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação. row) ou 200px de alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. (se o flex-directionFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados. forEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação. column) inicialmente.

.item-um {
  flex-basis: 200px; /* Tamanho inicial de 200px */
}

Nem sempre o item manterá exatamente esse valor, pois fatores como flex-grow e flex-shrink entrarão em jogo se o contêiner estiver grande de mais ou de menos.

Combinando: a Propriedade flex🔗

É comum vermos uma única escrita que junta esses três valores em uma só linha:

.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

Por exemplo:

.item-um {
  flex: 2 1 200px;
}
/* Equivale a
   flex-grow: 2;
   flex-shrink: 1;
   flex-basis: 200px;
*/

Esse atalho é bastante utilizado para simplificar o código. Aqui, estamos dizendo que .item-um inicia em 200px (bastante espaço), pode crescer até o dobro de outros itens que tenham flex-grow: 1, e ainda pode encolher uma vez se o contêiner ficar apertado.

Exemplificando de Forma Prática🔗

Para visualizar melhor, imagine o seguinte cenário: você tem um contêiner flex com três elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis.. Você quer que o primeiro elemento seja mais “dominante” na tela, mas que ainda possa encolher um pouco, e os outros dois sejam equilibrados na ocupação do espaço. Então:

1. Primeiro item com flex: 3 1 200px;

Começa com 200px de larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos..
Caso haja espaço extra, ele cresce 3 vezes mais rápido que um item com flex-grow: 1.
Caso falte espaço, ele encolhe mais devagar (flex-shrink: 1) que um item que talvez tenha flex-shrink: 2.

2. Segundo item com flex: 1 2 150px;

Começa com 150px.
Cresce normalmente (1).
Encolhe em dobro (2) caso precisemos acomodar.

3. Terceiro item com flex: 1 1 100px;

É o menor inicialmente, mas ainda assim pode crescer (pouco) e encolher conforme a necessidade.

Com esses parâmetrosFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas., você cria um dinamismo interessante, garantindo que cada elemento tenha seu tamanho inicial, mas ainda seja flexível para todos se encaixarem num layout adaptável.

Quando Usar Cada Propriedade🔗

Propriedade	Finalidade
flex-grow	Controlar o quanto o item pode crescer se houver espaço sobrando.
flex-shrink	Controlar o quanto o item pode encolher se não houver espaço suficiente.
flex-basis	Determinar o tamanho inicial (fixo ou não) do item antes dos ajustes de crescimento ou encolhimento.