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

Compartilhar

Compartilhar

Siga-me