Distribuição de espaço

9.1 Propriedade flex-grow

No Flexbox, há diversas ferramentas para gerenciar a distribuição de espaço entre os elementos dentro do Flex-container. As propriedades flex-grow, flex-shrink e flex-basis desempenham um papel crucial no controle do tamanho e comportamento dos elementos Flex em diferentes condições. Agora vamos detalhar cada uma dessas propriedades e como usá-las.

A propriedade flex-grow define a capacidade de um elemento Flex de crescer em tamanho para ocupar o espaço disponível no container. O valor de flex-grow é um coeficiente que indica o quanto o elemento pode crescer em comparação com outros elementos Flex.

Valores:

• Número inteiro ou valores fracionários
• Valor padrão: 0 (o elemento não cresce)

Exemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 500px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

    
      <div class="container">
        <div class="item grow-1">Elemento 1</div>
        <div class="item grow-2">Elemento 2</div>
        <div class="item grow-1">Elemento 3</div>
      </div>
    
  

Explicação do código:

• .grow-1: esses elementos têm o valor flex-grow: 1;, permitindo que eles cresçam uniformemente
• .grow-2: esse elemento tem o valor flex-grow: 2;, permitindo que ele cresça duas vezes mais em relação aos elementos com flex-grow: 1;

9.2 Propriedade flex-shrink

A propriedade flex-shrink define a capacidade de um elemento Flex de encolher de tamanho se o espaço no container estiver limitado. O valor de flex-shrink é um coeficiente que indica o quanto o elemento pode encolher em comparação com outros elementos Flex.

Valores:

• Número inteiro ou valores fracionários
• Valor padrão: 1 (o elemento pode encolher)

Exemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 150px;
      }

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

    
      <div class="container">
        <div class="item shrink-0">Elemento 1</div>
        <div class="item shrink-1">Elemento 2</div>
        <div class="item shrink-1">Elemento 3</div>
      </div>
    
  

Explicação do código:

• .shrink-0: esse elemento tem o valor flex-shrink: 0;, o que não permite que ele encolha
• .shrink-1: esses elementos têm o valor flex-shrink: 1;, permitindo que encolham conforme necessário

9.3 Propriedade flex-basis

A propriedade flex-basis define o tamanho inicial de um elemento Flex antes da distribuição do espaço livre. Pode ser definida em várias unidades de medida, como pixels, porcentagens e outras.

Valores:

• Comprimento em várias unidades (px, %, em, etc.)
• Valor padrão: auto (o tamanho é determinado pelo conteúdo)

Exemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Elemento 1</div>
        <div class="item basis-100px">Elemento 2</div>
        <div class="item basis-50percent">Elemento 3</div>
      </div>
    
  

Explicação do código:

• .basis-auto: esse elemento tem o valor flex-basis: auto;, o que significa que seu tamanho é determinado pelo conteúdo
• .basis-100px: esse elemento tem um tamanho inicial fixo de 100 pixels
• .basis-50percent: esse elemento tem um tamanho inicial de 50% da largura do container

9.4 Uso das propriedades

A propriedade flex é uma forma abreviada para definir flex-grow, flex-shrink e flex-basis. Ela permite gerenciar os três aspectos de distribuição de espaço com uma única propriedade.

Sintaxe:

    
      .container {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Exemplo de uso:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

    
      <div class="container">
        <div class="item flex-1">Elemento 1</div>
        <div class="item flex-2">Elemento 2</div>
        <div class="item flex-3">Elemento 3</div>
      </div>
    
  

Explicação do código:

• .flex-1: esse elemento tem flex: 1 1 auto;, o que significa que ele pode crescer e encolher uniformemente com outros elementos, e seu tamanho inicial é determinado pelo conteúdo
• .flex-2: esse elemento tem flex: 2 1 100px;, o que significa que ele pode crescer duas vezes mais em relação aos elementos com flex-grow: 1;, pode encolher e tem um tamanho inicial de 100 pixels
• .flex-3: esse elemento tem flex: 1 0 50%;, o que significa que ele pode crescer, mas não encolher, e seu tamanho inicial é 50% da largura do container