Distribuzione dello spazio

9.1 Proprietà flex-grow

In Flexbox ci sono diversi strumenti per gestire la distribuzione dello spazio tra gli elementi all'interno del Flex-container. Le proprietà flex-grow, flex-shrink e flex-basis svolgono un ruolo chiave nel controllo delle dimensioni e del comportamento dei Flex-elementi in diverse condizioni. Ora esamineremo in dettaglio ciascuna di queste proprietà e il loro utilizzo.

La proprietà flex-grow definisce la capacità di un Flex-elemento di aumentare di dimensione per riempire lo spazio disponibile nel container. Il valore di flex-grow rappresenta un fattore che indica quanto l'elemento può crescere in confronto con altri Flex-elementi.

Valori:

• Numero intero o valore decimale
• Valore predefinito: 0 (l'elemento non cresce)

Esempio di utilizzo:

    
      .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>
    
  

Spiegazione del codice:

• .grow-1: questi elementi hanno il valore flex-grow: 1;, il che consente loro di crescere uniformemente
• .grow-2: questo elemento ha il valore flex-grow: 2;, il che consente di crescere il doppio rispetto agli elementi con flex-grow: 1;

9.2 Proprietà flex-shrink

La proprietà flex-shrink determina la capacità di un Flex-elemento di ridursi in dimensione se lo spazio nel container è limitato. Il valore di flex-shrink rappresenta un fattore che indica quanto l'elemento può ridursi rispetto ad altri Flex-elementi.

Valori:

• Numero intero o valore decimale
• Valore predefinito: 1 (l'elemento può ridursi)

Esempio di utilizzo:

    
      .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>
    
  

Spiegazione del codice:

• .shrink-0: questo elemento ha il valore flex-shrink: 0;, il che non consente di ridursi
• .shrink-1: questi elementi hanno il valore flex-shrink: 1;, il che consente loro di ridursi secondo necessità

9.3 Proprietà flex-basis

La proprietà flex-basis definisce la dimensione iniziale di un Flex-elemento prima della distribuzione dello spazio libero. Può essere impostata in diverse unità di misura, come pixel, percentuali e altre.

Valori:

• Lunghezza in diverse unità (px, %, em ecc.)
• Valore predefinito: auto (la dimensione è determinata dal contenuto)

Esempio di utilizzo:

    
      .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>
    
  

Spiegazione del codice:

• .basis-auto: questo elemento ha il valore flex-basis: auto;, il che significa che la sua dimensione è determinata dal contenuto
• .basis-100px: questo elemento ha una dimensione iniziale fissa di 100 pixel
• .basis-50percent: questo elemento ha una dimensione iniziale del 50% della larghezza del container

9.4 Utilizzo delle proprietà

La proprietà flex è una forma abbreviata per impostare flex-grow, flex-shrink e flex-basis. Permette di gestire tutti e tre gli aspetti della distribuzione dello spazio in una sola proprietà.

Sintassi:

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

Esempio di utilizzo:

    
      .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>
    
  

Spiegazione del codice:

• .flex-1: questo elemento ha flex: 1 1 auto;, il che significa che può crescere e ridursi uniformemente con altri elementi, e la sua dimensione iniziale è determinata dal contenuto
• .flex-2: questo elemento ha flex: 2 1 100px;, il che significa che può crescere due volte più degli elementi con flex-grow: 1;, può ridursi e ha una dimensione iniziale di 100 pixel
• .flex-3: questo elemento ha flex: 1 0 50%;, il che significa che può crescere, ma non ridursi, e la sua dimensione iniziale è il 50% della larghezza del container