Como utilizar o Flexbox com Tailwind CSS - Parte 2

Saudações, caros leitores! Estamos de volta, com mais aprendizado envolvendo o Flexbox e o Tailwind CSS! Na última vez que nos encontramos e compartilhamos conhecimentos sobre o assunto, aprendemos os conceitos básicos do Flexible Box Module (pra nós que já nos tornamos íntimos desde o último artigo, já podemos chamar de Flexbox, não acha?), além de aprender a definir uma direção e alinhamentos tanto no eixo vertical quanto no horizontal.

Hoje, aprenderemos um pouco mais, construindo exemplos com o uso do Flex-Basis, Flex-Grow, Flex-Shrink, Order e Flex-Wrap!

Revisando

No artigo anterior, criamos uma aplicação com três blocos que foram utilizados para praticarmos as diversas funcionalidades que o Flexbox pode nos proporcionar. Continuaremos com o mesmo exemplo como base, que contém o seguinte código:

No container principal (linha 5 da figura 1), utilizamos o seguinte conjunto de classes para a estilização:

• bg-black - Classe que define a cor do background da página como preta;
• w-full - Fixa a largura do container para 100% do tamanho da largura disponível;
• h-screen - Define a altura do container para 100% da altura da viewport (ou seja, 100% da tela disponível para visualização);
• p-2 - Cria um espaçamento interno de 8px;
• flex - Habilita as funcionalidades do Flexbox para o container, fixando sua direção padrão como horizontal, já que não há uma definição de direção explícita para tal;
• justify-center - Alinha os itens dentro do container ao centro, em relação ao eixo principal que estão atrelados (que neste caso é o eixo x);
• items-center - Alinha os itens dentro do container ao centro, em relação ao eixo transversal (que neste caso é o eixo y).
  

Também temos os containers internos ao container principal (totalizando três, nas linhas 6, 11 e 16 da figura 1). Para estes, definimos:

• bg-white, bg-blue-400 e bg-yellow-200 - Cada classe define uma cor de background diferente para cada container;
• m-2- Cria um espaçamento externo de 8px para cada container.
  

Por fim, temos os parágrafos das linhas  7, 12 e 17 da figura 1, onde definimos:

• p-4 - Espaçamento interno de cada parágrafo de 16px;
• m-1 - Espaçamento externo de 4px;
• font-bold - Espessura da fonte do texto de 700;
• text-xl - Tamanho do texto de 20px.
  

Feito aquele resumo digno de esquentar os motores, estamos prontos para uma nova largada!

Flex-Basis

Vamos começar esta jornada falando do basis, que é utilizado para definir o tamanho inicial de cada item dentro de um container modelado pelo Flexbox. Isso é muito útil para casos em que precisamos definir dentro do flex tamanhos diferentes para os elementos que ele contém. Vamos aplicar tamanhos diferentes para cada um dos elementos dentro do container principal utilizando a classe basis:

Incrível e fácil, não acha? Lembrando que o tamanho é definido baseado no eixo dos quais os itens estão alinhados, então se aplicarmos a classe flex-col no container principal da linha 5 da figura 2, teremos o mesmo resultado, só que no eixo vertical:

Flex-Grow

Utilizamos o grow para definir o quanto determinado item pode ocupar um espaço que esteja disponível. Para ver de maneira efetiva do que estamos falando, vamos remover as classes basis dos três blocos, além de excluir também flex-col e justify-center do container principal, inserindo no mesmo a classe justify-between.

Com isso, a direção do alinhamento dos blocos voltará a ser horizontal e o alinhamento no eixo x deixará de ser ao centro, passando a distribuir um espaço igual entre os elementos:

Note que, como foi explicado, há um grande espaço entre os itens que podemos preencher utilizando o grow:

O Flex-Grow possui duas classes: a primeira você viu em ação nas figuras 8 e 9, chamada grow. A segunda tem o efeito inverso a esta que utilizamos e se chama grow-0. Ela é a configuração padrão padrão para classes flex quando não utilizamos nenhum atributo regulador relacionado.

Flex-Shrink

Utilizamos o shrink para definir o quanto um item pode diminuir, caso seja necessário. Assim como o grow, ele só possui duas opções: Aceitar que o item diminua ou não aceitar (classes shrink e shrink-0, respectivamente). Vamos analisar como nossa aplicação se comporta quando diminuímos o tamanho da tela:

Perceba que há uma quebra de linha no texto dentro de cada bloco quando diminuímos a tela. Isto acontece porque os elementos que se encontram dentro de containers flex possuem por padrão esta capacidade de reduzir-se, se adaptando ao tamanho disponível da tela (ou seja, a classe shrink é padrão, quando não declaramos nenhuma classe relacionada a este tipo de “funcionalidade”). Para impedir que este comportamento aconteça, utilizamos a classe shrink-0:

Concatenando funcionalidades

Como se não bastasse a facilidade que o Tailwind CSS nos proporciona no que diz respeito a utilizar funcionalidades como o Flexbox, é possível agilizar ainda mais nossa implementação com o uso deste framework. Existe uma classe chamada flex-initial, que permite que definamos o shrink e o grow ao mesmo tempo!

Isso mesmo que você leu: utilizando ela, definimos que um item pode diminuir e que ao mesmo tempo não poderá aumentar tomando todo o espaço vazio disponível, levando em consideração o seu tamanho inicial.

De forma análoga (porém com um comportamento diferente), a classe flex-1 também une as duas funcionalidades, com a diferença que por meio dela é definido que é possível um item crescer e diminuir conforme seja necessário e pertinente, ignorando o tamanho inicial que foi definido para ele.

Order

Utilizamos a classe order para definir a ordem em que os elementos serão apresentados na tela. Desta forma, eles não necessariamente serão exibidos na sequência que colocamos no nosso código (no nosso caso, primeiro o bloco 1 e depois o bloco 3). Experimente inverter as ordens de exibição destes elementos, levando em consideração que quanto menor for a numeração utilizada, mais ao topo na ordem o item ficará. Você também pode utilizar as classes order-first para indicar um item como o primeiro na ordem e order-last para indicar como o último:

Flex-Wrap

Por fim, mas não menos importante, através do atributo flex-flow podemos definir uma quebra de linha ou coluna para os elementos. Para observar este comportamento, vamos criar mais alguns containers dentro do container principal:

Note que os blocos 1 e 2 nem aparecem na tela e os blocos de 15 a 17 estão extrapolando-a. Sinceramente, não é isso que queremos, concorda? Mas calma! Podemos resolver isso com uma única classe do Tailwind, que é equivalente a definir o atributo flex-flow de um elemento como wrap: a flex-wrap (tão intuitiva quanto poderia se esperar do Tailwind):

Voilà! Respeitando as definições de alinhamento para os eixos x e y já existentes, a classe flex-wrap impede que os itens forcem a barra, indo para uma próxima “linha” caso a orientação seja no eixo horizontal ou para a próxima “coluna” caso a orientação esteja no eixo vertical.

Além da classe flex-wrap, também temos a flex-wrap-reverse (que aplica o wrap em ordem reversa) e o flex-nowrap (que desabilita a funcionalidade). Esta última vem como padrão quando não utilizamos nenhuma classe para configurar o flex-flow.

Considerações finais

Quanta coisa aprendemos juntos sobre o Flexbox nestes dois artigos, não acha? Conhecer mais sobre Flex-Basis, Flex-Grow, Flex-Shrink, Order e Flex-Wrap complementou ainda mais os conhecimentos que adquirimos no artigo anterior, de forma que abordamos grande parte das categorias de classes Tailwind CSS que nos concedem funcionalidades relacionadas ao tema principal.

É importante destacar que o uso das classes que foram trazidas neste artigo aqui só surtirão efeito se no container “pai” delas estivermos utilizando a classe flex, que é quem de fato habilita a possibilidade de uso de todas essas estilizações.

Queremos saber mais em relação ao que você achou deste artigo e o quanto ele te ajudou.

Caso queira tirar quaisquer dúvidas ou somente trocar uma ideia sobre esses e mais assuntos de outra forma, você também pode entrar em contato comigo pelo e-mail bruno.cabral.silva2018@gmail.com ou pelo meu perfil do LinkedIn. Te espero ansiosamente! Bons estudos e até a próxima!