Flex grow

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 di esempio:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio proprietà flex-grow CSS</title>
    <style>
      .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
      }
  </style>
  </head>
  <body>
  <h1>Proprietà flex grow</h1>
  <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>
  </body>
</html>

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.

flex grow css

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.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Come impostare le pseudo-classi

CSS responsive

Font nei CSS

Proprietà Overflow nei CSS

La proprietà position dei CSS

Proprietà z-index

Introduzione a flexbox e proprietà, display:flex

Le proprietà dei box flessibili

Esempi con la proprietà flex-direction

Impostare la proprietà flex-wrap

Come utilizzare la proprietà justify content

Esempi con la proprietà aling items

Utilizzare la proprietà align content per contenitori multi-riga

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *