Flex Grow e Shrink
Outro conceito importante é a capacidade de controlar como os itens se expandem ou encolhem para preencher o espaço disponível.
Usamos as propriedades flex-grow
e flex-shrink
para ajustar esse comportamento.
flex-grow
define a proporção em que um item cresce em relação aos outros dentro do Flex Container. Quanto maior o valor, mais ele crescerá.flex-shrink
controla a proporção de encolhimento dos itens quando o espaço é limitado. Um valor maior significa mais encolhimento.
Essas propriedades são úteis quando você deseja que certos itens se expandam mais ou menos do que outros, mantendo um layout equilibrado.
Vamos exemplificar:
Suponha que você esteja criando um menu de navegação horizontal e deseja que os itens do menu se expandam igualmente quando houver espaço disponível, mas também encolham quando o espaço for limitado.
HTML
<!-- HTML --> <div class="menu"> <div class="menu-item">Home</div> <div class="menu-item">Sobre</div> <div class="menu-item">Produtos</div> <div class="menu-item">Contato</div> </div>
CSS
/* CSS */ .menu { display: flex; justify-content: space-between; /* Espaço igual entre os itens */ } .menu-item { flex-grow: 1; /* Todos os itens crescem igualmente */ flex-shrink: 1; /* Todos os itens encolhem igualmente */ }
Neste exemplo, todos os itens do menu têm flex-grow: 1;
, o que significa que eles crescerão igualmente para preencher o espaço disponível.
Além disso, eles têm flex-shrink: 1;
, o que permite que eles encolham igualmente quando o espaço é limitado.
Visualização da propriedade flex-grow