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.
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:
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.
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.
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?
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.
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!