Guida completa per il layout Flexbox

Il layout Flexbox o (Box Flessibili) disponibile con il nuovo standard CSS3, è un tentativo di migliorare il modello a del Box blocco. Il tentativo è di avere un modo efficiente di allineare e distribuire lo spazio tra gli elementi figli di un contenitore, anche nei casi in cui la dimensione degli elementi non è nota a priori o generato in maniera dinamica o se vogliamo "flessibile".

Cosa significa il layout Flexbox

Il layout Flexbox funziona dando al contenitore/parente la capacità di modificare la lunghezza, larghezza o ordine dei suoi elementi/figli contenuti, in modo tale che questi elementi riempino lo spazio disponibile secondo regole precise. Il layout Flexbox deve funzionare su tutti i tipi di display dal punto di vista della forma e delle dimensioni. Un contenitore Flex espande gli elementi fino a riempire lo spazio disponibile o restringerli in modo tale da prevenire l'overflow o trabocco.

Il layout Flexbox non ha una direzione predefinita, quindi non si comporta come il tipo block che ha un allineamento di tipo verticale o l'inline che ne ha uno di tipo orizzontale. Il layout Flexbox è più indicato nei layout piccoli, quindi piccoli schermi o blocchi interni della pagina di dimensioni non molto grandi.

Come usare il layout Flexbox

Come detto in precedenza, questo layout si basa sulla presenza di un contenitore/parente e di alcuni elementi/figli a cui vanno applicati degli stili CSS.

Proprietà per il contenitore/parente flex:

  • display

    Definisce il contenitore come flex, inline o block, in questa maniera tutti i discendenti del contenitore ricadranno in un contesto flessibile.

    .contenitore {
    	display: flex; /* || inline-flex */
    }
  • flex-direction

    Definisce l'asse secondo cui gli elementi si devono allineare all'interno del contenitore. Flexbox comporta un allineamento a direzione singola, righe orizontali o colonne verticali.

    .contenitore {
    	flex-direction: row; /* || row-reverse || column || column-reverse */
    }
    dove:

    • row (default): allineamento da sinistra a destra

      Esempio:

      <div style="
      	display: flex;
      	flex-direction:row;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      </div>
      1
      2
      3

    • row-reverse: allineamento da destra a sinistra

      Esempio:

      <div style="
      	display: flex;
      	flex-direction:row-reverse;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      </div>
      1
      2
      3

    • column: allineamento dall'alto in basso

      Esempio:

      <div style="
      	display: flex;
      	flex-direction:column;">
      	<div<>1</div>
      	<div<>2</div>
      	<div<>3</div>
      </div>
      1
      2
      3

    • column-reverse: allineamento dal basso verso l'alto

      Esempio:

      <div style="
      	display: flex;
      	flex-direction:column-reverse;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      </div>
      1
      2
      3
  • flex-wrap

    Di default tutti gli elementi flex tenteranno di adattarsi o calzare su una sola linea, si può cambiare questo comportamento dando la possibilità agli elementi di espandersi in più linee a seconda delle neccessità.

    .contenitore{
    	flex-wrap: nowrap; /* || wrap || wrap-reverse */
    }
    dove:

    • nowrap (default): tutti gli elementi si adattano in una sola linea

      Esempio:

      <div style="
      	display: flex;
      	flex-wrap:nowrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • wrap: gli elementi si espandono su più linee dall'alto in basso

      Esempio:

      <div style="
      	display: flex;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • wrap-reverse: gli elementi si espandono su più linee dal basso all'alto

      Esempio:

      <div style="
      	display: flex;
      	flex-wrap:wrap-reverse;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
  • flex-flow

    Abbreviazione per le proprietà flex-direction e flex-wrap, il valore di default è nowrap.

    .contenitore{
    	flex-flow: <'flex-direction'> || <'flex-wrap'>
    }
  • justify-content

    Definisce l'allineamento nell'asse orizzontale. Definisce come distribuire lo spazio libero tra gli elementi.

    .contenitore {
    	justify-content: flex-start; /* || flex-end || center || space-between || space-around */
    }
    dove:

    • flex-start (default): tutti gli elementi sono ammassati a partire dalla linea di partenza

      Esempio:

      <div style="
      	display: flex;
      	justify-content:flex-start;">
      	<div style="width:43px;">1</div>
      	<div>2</div>
      	<div style="width:53px;">3</div>
      </div>
      1
      2
      3

    • flex-end: tutti gli elementi sono ammassati verso la linea di fine

      Esempio:

      <div style="
      	display: flex;
      	justify-content:flex-end;">
      	<div style="width:43px;">1</div>
      	<div>2</div>
      	<div style="width:53px;">3</div>
      </div>
      1
      2
      3

    • center: tutti gli elementi ammassati nella parte centrale

      Esempio:

      <div style="
      	display: flex;
      	justify-content:center;">
      	<div style="width:43px;">1</div>
      	<div>2</div>
      	<div style="width:53px;">3</div>
      </div>
      1
      2
      3

    • space-between: tutti gli elementi sono distribuiti equamente tranne il primo e l'ultimo; il primo elemento posizionato nella linea di partenza, l'ultimo nella linea di fine

      Esempio:

      <div style="
      	display: flex;
      	justify-content:space-between;">
      	<div style="width:43px;">1</div>
      	<div>2</div>
      	<div style="width:53px;">3</div>
      </div>
      1
      2
      3

    • space-around: tutti gli elementi sono distribuiti equamente, suddividendo lo spazio tra gli elementi in maniera uguale. Questo fa si che il primo elemento abbia un unità di spazio tra l'elemento stesso e la linea di partenza e due unità di spazio con l'elemento che lo segue, stesso comportamento per l'ultimo elemento pero la singola unità di spazio si trova tra l'elemento e la linea di fine

      Esempio:

      <div style="
      	display: flex;
      	justify-content:space-around;">
      	<div style="width:43px;">1</div>
      	<div>2</div>
      	<div style="width:53px;">3</div>
      </div>
      1
      2
      3
  • align-items

    Definisce l'allineamento nell'asse verticale. Definisce come distribuire lo spazio libero tra gli elementi.

    .contenitore {
    	align-items: stretch; /* || flex-start || flex-end || center || baseline  */
    }
    dove:

    • stretch (default): tutti gli elementi si allungano per riempire il contenitore (nel rispetto di min-width/max-width)

      Esempio:

      <div style="
      	display: flex;
      	align-items:stretch;">
      	<div style="width:43px;font-size:larger">1 a b</div>
      	<div>2 a b c d</div>
      	<div style="width:53px;font-size:smaller">3 a b c</div>
      </div>
      1 a b
      2 a b c d
      3 a b c

    • flex-start: tutti gli elementi si posizionano nel margine superiore del contenitore lasciando spazio variabile con il margine inferiore

      Esempio:

      <div style="
      	display: flex;
      	align-items:flex-start;">
      	<div style="width:43px;font-size:larger">1 a b</div>
      	<div>2 a b c d</div>
      	<div style="width:53px;font-size:smaller">3 a b c</div>
      </div>
      1 a b
      2 a b c d
      3 a b c

    • flex-end: tutti gli elementi si posizionano nel margine inferiore del contenitore lasciando spazio variabile con il margine superiore

      Esempio:

      <div style="
      	display: flex;
      	align-items:flex-end;">
      	<div style="width:43px;font-size:larger">1 a b</div>
      	<div>2 a b c d</div>
      	<div style="width:53px;font-size:smaller">3 a b c</div>
      </div>
      1 a b
      2 a b c d
      3 a b c

    • center: tutti gli elementi si centrano rispetto all'asse verticale, ogni elemento lascia uno spazio uguale tra se stesso e i margini superiore e inferiore

      Esempio:

      <div style="
      	display: flex;
      	align-items:center;">
      	<div style="width:43px;font-size:larger">1 a b</div>
      	<div>2 a b c d</div>
      	<div style="width:53px;font-size:smaller">3 a b c</div>
      </div>
      1 a b
      2 a b c d
      3 a b c

    • baseline: tutti gli elementi si posizionano in modo tale che la linea di base sia la stessa per tutti. Come vedete dal esempio, il testo è tutto su la stessa linea, anche se le dimensioni sono differenti.

      Esempio:

      <div style="
      	display: flex;
      	align-items:baseline;">
      	<div style="width:43px;font-size:larger">1 a b</div>
      	<div>2 a b c d</div>
      	<div style="width:53px;font-size:smaller">3 a b c</div>
      </div>
      1 a b
      2 a b c d
      3 a b c
  • align-content

    Definisce l'allineamento nell'asse verticale, ma a differenza della proprietà di align-items distribuisce lo spazio libero tra gruppi di elementi che stanno in una singola linea, siamo nel caso in cui gli elementi si distribuiscono su più linee. Questa proprietà non ha effetto se gli elementi sono tutti distribuiti su una singola linea. Importante: deve avere la proprietà flex-wrap:wrap altrimenti non funziona.

    .contenitore {
    	align-content: stretch; /* || flex-start || flex-end || center || space-between || space-around  */
    }
    dove:

    • stretch (default): tutti gli elementi si allungano verticalmente per riempire il contenitore

      Esempio:

      <div style="
      	display: flex;
      	align-content:stretch;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • flex-start: tutti gli elementi si ammassano sul margine superiore

      Esempio:

      <div style="
      	display: flex;
      	align-content:flex-start;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • flex-end: tutti gli elementi si ammassano sul margine inferiore

      Esempio:

      <div style="
      	display: flex;
      	align-content:flex-end;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • center: tutti gli elementi si ammassano nella parte centrale, lasciando uno spazio uguale suddiviso tra il primo elemento e il margine superiore e l'ultimo elemento e il margine inferiore

      Esempio:

      <div style="
      	display: flex;
      	align-content:center;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • space-between: il primo gruppo di elementi si posiziona sul margine superiore, l'ultimo gruppo di elementi si posiziona sul margine inferiore e lo spazio rimanente si suddivide tra i gruppi di elementi sulla stessa linea

      Esempio:

      <div style="
      	display: flex;
      	align-content:space-between;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

    • space-around: lo spazio verticale si suddivide tra gruppi di elementi sulla stessa linea

      Esempio:

      <div style="
      	display: flex;
      	align-content:space-around;
      	flex-wrap:wrap;">
      	<div>1</div>
      	<div>2</div>
      	<div>3</div>
      	<div>4</div>
      	<div>5</div>
      	<div>6</div>
      	<div>7</div>
      	<div>8</div>
      	<div>9</div>
      	<div>10</div>
      	<div>11</div>
      	<div>12</div>
      	<div>13</div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

Proprietà per gli elementi/figli flex:

  • order

    Dando un valore all'elemento si può cambiare l'ordine di comparsa

    .elemento {
    	order: intero;
    }

    Esempio:

    <div style='
    	display: flex;'>
    	<div style="order:1">1 <small>(order:1)</small></div>
    	<div>2 <small>(order:0)</small></div>
    	<div style="order:-1">3 <small>(order:-1)</small></div>
    </div>
    1 (order:1)
    2 (order:0)
    3 (order:-1)
  • flex-grow

    Definisce la capacità di un elemento di crescere, si può specificare un valore unitario per alcuni elementi e un valore più alto per alcuni. Cosi se su tre elementi due hanno valore unitario 1 e uno ha valore 2, quest'ultimo cercherà di occupare il doppio dello spazio rispetto agli altri elementi

    .elemento {
    	flex-grow: numero; /* default 0, valori negativi non consentiti */
    }

    Esempio:

    <div style='
    	display: flex;'>
    	<div style="flex-grow:1"><small>(f-g:1)</small></div>
    	<div style="flex-grow:3"><small>(f-g:3)</small></div>
    	<div style="flex-grow:1"><small>(f-g:1)</small></div>
    </div>
    (f-g:1)
    (f-g:3)
    (f-g:1)
  • flex-shrink

    Definisce l'abilità di un elemento di contrarsi se necessario.

    .elemento {
    	flex-shrink: numero; /* default 1, valori negativi non consentiti */
    }

    Esempio:

    <div style='
    	display: flex;'>
    	<div><small>(f-sh:1)</small></div>
    	<div style="flex-shrink:2;"><small>(f-sh:2)</small></div>
    	<div><small>(f-sh:1)</small></div>
    	<div><small>(f-sh:1)</small></div>
    </div>
    (f-sh:1)
    (f-sh:2)
    (f-sh:1)
    (f-sh:1)
  • flex-basis

    Definisce lo spazio di default di un elemento prima che lo spazio rimanente sia distribuito. Puo avere dimensione del tipo (5%, 5rem ...). Nel esempio qui sopra flex-basis è impostato al 100%

    .elemento {
    	flex-basis: length; /* default auto */
    }
  • flex

    Come flex-flow, abbreviazione per flex-grow, flex-shrink e flex-basis combinate, il secondo e terzo paramtero sono opzionali. I valori default sono 0, 1 e auto.

    .elemento {
    	flex: none /* 'flex-grow', 'flex-shrink', 'flex-basis' */
    }
  • align-self

    Attraverso questa proprietà si può sovrascrivere la proprietà definita da align-items per singoli elementi. I valori float, clear e vertical-align non hanno effetto sugli elementi con proprietà flex.

    .elemento {
    	align-self: auto; /* flex-start || flex-end || center || baseline || stretch */
    }

    Esempio:

    <div style="
    	display: flex;
    	align-items:flex-start;">
    	<div style="width:43px;font-size:larger">1</div>
    	<div style="align-self:flex-end">2 (<small>f-e</small>)</div>
    	<div style="width:53px;font-size:smaller">3</div>
    </div>
    1
    2 (f-e)
    3