Flex grow, ingrandire i box, proprietà flex-grow CSS

La proprietà flex grow consente di impostare il fattore di ingrandimento , cioè rende semplicemente più grande un box contenitore rispetto ad un altro nel contenitore padre.

Flex grow valori possibili

Questa proprietà ammette un valore numerico che dunque determina l’ingrandimento del box che segue questa regola.

Se tutti gli elementi hanno ad esempio la proprietà flex-grow uguale a 1, lo spazio libero verrà suddiviso equamente fra tutti gli elementi (box).

Invece se un elemento ha la stessa proprietà impostata a 2 allora riceverà il doppio dello spazio rispetto agli altri elementi.

E così via per gli altri valori.

Il valore di default è 0.

Flex grow esempi

Facciamo degli esempi pratici per capire come funziona questa proprietà.

Creiamo tre box contenitori dove nel primo impostiamo la proprietà flex grow con il valore 1, nel secondo il valore 3 e nel terzo il valore 4.

Di seguito ecco dunque il codice CSS di esempio:


.container {
     background-color: #ff00ff;
     display: flex;
     align-items: stretch
   }
.container > div {
     background-color: #eee;
     margin: 10px;
     text-align: center;
     font-size: 30px
   }
.primo {
     flex-grow:1
  }
.secondo {
     flex-grow:3
  }
.terzo {
    flex-grow:4
  }

E il codice HTML:

  <div class="container">
    <div class="primo">flex-grow: 1</div>
    <div class="secondo">flex-grow: 3</div>
    <div class="terzo">flex-grow: 4</div>
  </div>

Come possiamo notare questa proprietà si applica ai box flessibili contenuti nel contenitore padre.

Nell’immagine sotto potete notare come gli elementi hanno grandezza differente in base al valore specificato.

Conclusioni

Ho proposto un semplicissimo esempio della proprietà flex grow, provate anche voi adesso inserendo altri box contenitori e gestendo le grandezze in base alle vostre esigenze.

Nella prossima lezione vedremo una proprietà simile a questa che però consente di rimpicciolire i box contenitori.

Lezione precedente: proprietà align content

Lezione successiva: proprietà flex shrink