Neste tutorial, vamos nos concentrar no modificador de propriedades CSS flex-shrink. Esta opção faz parte do modelo de Flexbox, que permite criar layouts flexíveis que se ajustam a diferentes tamanhos de tela. Enquanto no último vídeo abordamos o flex-grow, que controla como os elementos podem crescer no container flex, desta vez trataremos da redução dos elementos quando o espaço disponível no container for menor do que o flex-basis especificado. Neste post, você aprenderá como limitar ou ajustar de forma direcionada a redução dos elementos da Flexbox com o flex-shrink.
Principais Insights
- Flex-shrink determina o quanto um elemento pode encolher quando não há espaço suficiente disponível.
- O valor padrão para flex-shrink é 1, o que significa que um elemento pode ocupar espaço conforme o espaço disponível e outros elementos no container forem definidos.
- Pode-se usar flex-shrink para definir uma proporção específica de encolhimento entre vários elementos.
Guia Passo a Passo
A seguir, explicarei os passos para utilizar o flex-shrink de forma otimizada. Vou fornecer cada passo com variáveis de captura de tela, que você poderá substituir posteriormente pelas capturas de tela do vídeo.
Primeiro, você verá uma aplicação básica de Flexbox em CSS. Você tem três elementos com um flex-basis de 100 pixels. Se houver espaço suficiente no container flexível, tudo permanecerá como planejado.
Agora, reduzimos a altura do container para 200 pixels. Neste caso, o espaço necessário é maior do que a altura do container. Os elementos continuam com um flex-basis de 100 pixels e, portanto, não podem encolher, devido ao flex-shrink definido como 0.
Para ativar o mecanismo de encolhimento, altere o valor de flex-shrink. Defina-o como 1 para o elemento nav. Dessa forma, você informa ao CSS que o elemento nav deve encolher no máximo.
Agora, salve suas alterações e você verá que o elemento nav será encolhido proporcionalmente, até a altura mínima determinada pelo conteúdo.
Se deseja que todos os elementos encolham de forma uniforme, defina o flex-shrink como 1 para todos os elementos. Se o container ficar menor do que o espaço necessário, todos os elementos encolherão proporcionalmente.
Para mostrar de forma resumida como os diferentes valores de flex-shrink afetam o layout, selecione uma proporção como 1:1:2. Neste caso, a área principal (main) receberá a maior parcela de encolhimento, enquanto os outros elementos receberão parcelas menores respectivamente.
Isso significa que o elemento principal (main) ocupará mais espaço em caso de falta de espaço ou precisará de menos espaço do que os outros dois elementos. No entanto, se desejar uma adaptação de layout uniforme, você também pode definir o flex-shrink com o mesmo valor para todos os elementos.
Por fim, você pode combinar os valores de flex-grow, flex-shrink e flex-basis para obter mais flexibilidade na criação de layouts em CSS. Certifique-se de ajustá-los sempre às necessidades do seu design.
Resumo
Neste tutorial, você aprendeu como usar o flex-shrink em CSS para controlar a mudança de tamanho dos elementos da Flexbox. Você conheceu várias maneiras de definir o encolhimento e como isso afeta o layout.
Perguntas Frequentes
Como o flex-shrink funciona?O flex-shrink determina o quanto um elemento pode encolher quando o espaço disponível é menor do que o flex-basis.
Qual é o valor padrão do flex-shrink?O valor padrão do flex-shrink é 1, o que significa que todos os elementos encolhem de forma uniforme.
Como definir o flex-shrink para vários elementos?Ao especificar o mesmo valor de flex-shrink para todos os elementos, o encolhimento é distribuído uniformemente.
Posso usar flex-shrink em combinação com flex-grow?Sim, o flex-shrink, flex-grow e flex-basis podem ser combinados para criar um layout flexível.
O que acontece quando o flex-shrink é definido como 0?Quando o flex-shrink é definido como 0, os elementos correspondentes não encolherão, mesmo que o container seja menor do que a soma do flex-basis deles.
