# O poder de flex-grow em Flexbox > Descubra o verdadeiro poder de flex-grow em Flexbox CSS. Entenda distribuição inteligente de espaço e controle preciso de crescimento de elementos. Domine! URL: https://dpw.dev/css/flex-grow-flexbox-poder/ Publicado em: 2018-05-14 Categoria: css Tags: flexbox, layout, web-design-responsivo Autor: Tárcio Zemel Já faz algum tempo desde o advento de **Flexbox**. Contudo, tanto para os que ainda não tiveram a oportunidade de estudo/uso da tecnologia, tanto para os que já usam, algumas questões de sua potencialidade podem passar despercebidas. Por exemplo, o uso de `flex-grow`. Neste artigo, veja como é possível usar `flex-grow` para a resolução de um problema comum em desenvolvimento front-end e quais as vantagens do uso de Flexbox em comparação a outras tecnologias. > Artigo baseado em [The Power of Flex-Grow](https://hackernoon.com/the-power-of-flex-grow-d8ea61ccf16e). Criar um web site pode ser um desafio, especialmente quando parte (ou o todo) do conteúdo é dinâmico. Às vezes, é preciso adicionar ou remover conteúdo com base em inputs de quem usa o usa ou em outras condições. Por exemplo: ![Flex grow: 3 exemplos de layouts usando tecnologias diferentes](/images/blog/flex-grow-flexbox-poder/1526304537-flex-grow-flexbox-poder-apresentacao-problema.webp) Aqui, tem-se a mesma janela e o objetivo a ser alcançado são botões uniformemente espaçados em uma seção da página -- algo como uma barra de navegação ou algum outro bloco de conteúdo. Normalmente, uma maneira fácil de fazer isso é definir a largura em pixels de cada botão, como no primeiro exemplo. Se se sabe a largura máxima para a página, simplesmente mede-se os `px` necessários para cada botão. Uma segunda opção, mostrada no exemplo 2, é com porcentagens. Com 3 botões em um cenário que ocupem a largura total, se a janela estivesse configurada para `100vw`, seria possível definir cada botão com aproximadamente `33%` de largura -- também funcionaria se o contêiner/janela fosse definidos em pixels. A terceira opção seria trabalhar com Flexbox usando as propriedades `flex-basis` e `flex-grow`. Se as dimensões estiverem definidas para `100px` -- ou qualquer que seja o caso --, é possível adicionar uma base flexível. Mantendo os diferentes contextos, `flex-basis` é semelhante a `min-width`: basicamente, `100px` é a largura-base do conteúdo, mas, com o flexbox, essa largura será alterada dependendo do conteúdo adicional adicionado ou removido. > **Dica:** Para maiores informações, confira nossa [referência completa de Flexbox](/css/flexbox/). `flex-basis` e `flex-grow` são determinados em que "espaço negativo" está disponível no contêiner dos botões. Se houver 3 botões com larguras de `100px` e `flex-basis` for `0`, é possível definir a `flex-grow` para `1.5`. Isto significa que, se qualquer um dos 3 botões for removido, os 2 restantes ajustarão sua largura para considerar o espaço extra usando `100px` como base para suas larguras ajustadas. ![Retirando um botão desse layout, o que usa flex-grow tem uma clara vantagem em manutenção.](/images/blog/flex-grow-flexbox-poder/1526304631-flex-grow-flexbox-poder-retirando-1-botao.webp) Os elementos que usam `px` ou `%` permaneceriam os mesmos. Dependendo das configurações de alinhamento, o conteúdo poderia mudar para o meio da tela -- e, é claro, a porcentagem de elementos definidos mudar se o container em que eles estão fosse definido pela largura da viewport --, mas a consistência de ambos os exemplos nem sempre seria ótima. No terceiro caso, os elementos se ajustam com base no fator de crescimento `1.5`. Se o valor de `flex-grow` fosse definido como `0`, os elementos se comportariam exatamente como no primeiro exemplo e permaneceriam com `100px` de largura -- seria possível, também, alterar o crescimento flexível de cada componente individualmente. Se o primeiro elemento tivesse `flex-grow: 1.2` e o segundo `flex-grow: 1.7`, quando o terceiro elemento fosse removido, o segundo seria maior que o primeiro, pois ocuparia mais espaço restante no tela. E para casos em que se adicionam elementos? ![Ao adicionar um botão, o layout que usou flex-grow continua com a vantagem no quesito manutenção.](/images/blog/flex-grow-flexbox-poder/1526304740-flex-grow-flexbox-poder-adicionando-1-botao.webp) No primeiro caso, um elemento adicional extrapolaria a janela/container. No caso de porcentagens, o caso ficaria ainda mais complicado. Como cada elemento quer pegar sua porcentagem de espaço, eles vão ou se sobrepor ou reagir como o primeiro caso, dependendo de quaisquer valores de `z-index` especificados. Em ambos os casos, o resultado é menos que desejável. Em nosso terceiro exemplo, o elemento adicional não cria nenhum problema, já que todos se acomodam dentro da nova realidade de espaço disponível. > **Atenção:** Embora o que acontece no terceiro caso seja ótimo, em casos em que fossem necessários adicionar mais elementos, por exemplo, 5 elementos extras, provavelmente fosse mais interessante criar uma nova linha como uma solução alternativa -- que, também, seria esteticamente mais agradável/usável. ## Conclusão Mesmo **Flexbox** já sendo uma tecnologia de uso amadurecido, do dia-a-dia, suas totais potencialidades certamente ainda não foram "reveladas". Dicas e técnicas com propriedades isoladas da tecnologias, como é o caso de `flex-grow`, fazem parte deste quadro geral. É imprescindível conhecer os conceitos e bases de uso da tecnologia, mas, certamente, a experiência e pesquisas sobre soluções criativas na comunidade ampliará sua percepção de uso e prática. Use Flexbox! > **Dica:** [Faça nosso curso completo de Flexbox grátis!](https://www.youtube.com/watch?v=SAl0i5rzX3U&list=PLYgzkrmJnLwo8IDD2v7RP_oyE3yzc1fY4) --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml