La guida completa all’utilizzo del Flexible Box Layout Module

All’inizio della seconda metà degli anni Novanta, nel periodo dell’accelerazione della diffusione di Internet a livello globale, sviluppare un sito web richiedeva una certa abilità nel maneggiare le tabelle per realizzare semplici layout. Il tag table costituiva l’elemento fondamentale per organizzare le varie sezioni di contenuto presenti all’interno delle pagine e spesso, nei layout più complessi, il suo utilizzo si traduceva in un’eccessiva proliferazione di tabelle annidate, ciascuna con caratteristiche e proprietà di stile dichiarate direttamente all’interno del codice HTML, difficili da gestire e manutenere.

A partire dal 1999, l’introduzione dello standard CSS Level 2 e successivamente del CSS Level 3 ha fornito agli sviluppatori strumenti più agevoli per l’implementazione di layout sempre più complessi, sostituendo l’approccio tabellare e separando il contenuto dalla presentazione di un sito web. Nel più recente passato, per l’implementazione a griglie di una pagina web si è largamente utilizzata la proprietà float dei CSS ma a partire dal 2008, la necessità di sviluppare pagine responsive, che si adattassero facilmente agli schermi dei vari dispositivi mobili, ha favorito nuove soluzioni tra cui l’adozione del cosiddetto CSS Flexible Box Layout Module.

In questa guida sono illustrate in dettaglio le principali caratteristiche del Flexible Box Layout Module e le modalità con le quali si possono realizzare i layout più comuni, attraverso una combinazione delle proprietà a disposizione.


1. Per iniziare

1.1 Il contenitore flex

Un conteniore di tipo flex è un elemento HTML a cui è attribuita la proprietà CSS display: flex o display: flex-inlinetale da determinare la disposizione degli elementi contenuti al suo interno tramite le proprietà del Flexible Box Layout Module. Per realizzare un contenitore di questo tipo è sufficiente assegnare una classe che chiameremo .flex a un elemento HTML, in questo caso a un blocco div.

<div class="flex">
    <!-- Elementi child -->
</div>

Contestualmente basta definire la classe flex nel codice CSS e dichiarare la proprietà display: flex al suo interno.

.flex {
    /* Questo è un contenitore di tipo flex */
    display: flex;
}

In questo modo, gli elementi interni al contenitore diventano elementi flessibili e possono essere disposti facilmente sfruttando le proprietà del CSS Flexible Box Layout Module che sono illustrate nel dettaglio nei successivi paragrafi.

  • flex-direction
  • align-items
  • justify-content
  • flex-wrap
  • flex-flow
  • align-content

Prima di procedere è opportuno specificare che gli elementi interni a un contenitore flessibile sono disposti lungo due assi: il main axis, l’asse principale, e il cross axis, perpendicolare all’asse principale. Inoltre si definiscono i seguenti punti:

  • main start, il punto iniziale del main axis, posizionato a sinistra nell’impostazione di default.
  • main end, il punto finale del main axis, posizionato a destra nell’impostazione di default.
  • cross start, il punto iniziale del cross axis, posizionato in alto nell’impostazione di default.
  • cross end, il punto finale del cross axis, posizionato in basso nell’impostazione di default.
main axis
cross axis
main start
main end
cross start
cross end

È importante fissare tale rappresentazione poiché tornerà utile per comprendere più avanti il comportamento delle proprietà del modulo flex.

1.2 La struttura HTML

Negli esempi che seguono verrà utilizzato uno schema caratterizzato da un contenitore flex all’interno del quale sono disposti una serie di elementi interni di varia numerosità, funzionale alla descrizione dello specifico layout. La struttura HTML comune a tutte le varie configurazioni è la seguente:

<div class="flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <!-- Altri elementi in ordine progressivo -->
</div>

Per brevità non verrà riproposta in ogni esempio.

1.3 Naming convention

A livello generale, per quanto riguarda il naming delle classi CSS, consiglio di seguire le regole standard dell’approccio BEM per garantire lo sviluppo di moduli riusabili, modulari e flessibili.

There are only two hard problems in Computer Science: cache invalidation and naming things.
Phil Karlton1

1.4 Supporto dei browser

La proprietà flex è supportata da tutti i moderni browser ed è quindi utilizzabile senza problemi di compatibilità. Per la lista completa dei browser e delle relative versioni potete consultare questo riferimento.


2. La proprietà flex-direction

Incominciamo a illustrare le proprietà del modulo flex partendo dalla proprietà flex-direction che determina il verso2 del main axis così da definire l’orientamento per riga o per colonna degli elementi interni al contenitore. Di default gli elementi sono disposti per riga e orientati da sinistra verso destra.

2.1 flex-direction: row

La proprietà flex-direction: row consente di disporre gli elementi all’interno del contenitore a partire dal punto main start del main axis che, nell’impostazione di default, è posto a sinistra.

A
B
C
.flex {
    display: flex;
    /* Imposta la direzione del main axis per riga, da sinistra verso destra. */
    flex-direction: row;
}

2.2 flex-direction: row-reverse

La proprietà flex-direction: row-reverse permuta la posizione dei punti main start e main end, allineando gli elementi interni al contenitore a partire da destra verso sinistra.

A
B
C
.flex {
    display: flex;
    /* Imposta la direzione del main axis per riga, da destra verso sinistra. */
    flex-direction: row-reverse;
}

Si può osservare che nei due esempi a cambiare è soltanto il codice CSS, mentre l’ordine di dichiarazione degli elementi HTML, interni al contenitore, ha la medesima struttura illustrata al paragrafo 1.1.

2.3 flex-direction: column

La proprietà flex-direction: column consente di disporre gli elementi interni al contenitore flessibile per colonna, orientando il verso del main axis dall’alto verso il basso.

A
B
C
.flex {
    display: flex;
    /* Imposta la direzione del main axis per colonna, dall'alto verso il basso. */
    flex-direction: column;
}

2.4 flex-direction: column-reverse

La proprietà flex-direction: column-reverse consente invece di disporre gli elementi per colonna, orientando il verso del main axis dal basso verso l’alto. Come nel caso della proprietà flex-direction: row-reverse, la proprietà flex-direction: column-reverse permuta la la posizione dei punti main start e main end, allineando gli elementi a partire dal basso verso l’alto.

A
B
C
.flex {
    display: flex;
    /* Imposta la direzione del main axis per colonna, dal basso verso l'alto. */
    flex-direction: column-reverse;
}

Si tenga conto che, come nel caso della disposizione per riga, anche nella rappresentazione corrente l’ordine di dichiarazione degli elementi nel codice HTML presenta la medesima struttura illustrata al paragrafo 1.1.

2.5 Nota

Per brevità di rappresentazione, negli esempi che seguiranno si eviterà di riportare il codice CSS degli elementi contenuti all’interno del contenitore flex. Tipicamente il codice si può ricondurre, con le dovute modifiche, a una configurazione simile a quella utilizzata nel caso flex-direction: row:

.flex > div {
    width: 150px;
    height: 50px;
    line-height: 50px;
}
.flex > div:not(:lastchild) {
    margin-right: 10px;
}

3. La proprietà align-item

La proprietà align-item determina l’allineamento rispetto al cross axis degli elementi interni a un contenitore flessibile. Gli elementi possono essere allineati in alto, al centro, in basso o secondo altre configurazioni illustrate in dettaglio di seguito.

3.1 align-item: flex-start

La proprietà align-item: flex-start consente di allineare gli elementi interni al contenitore a partire dal punto cross start del cross axis. Negli esempi che seguono, per il contenitore, è stata impostata la proprietà height: 150px.

A
B
C
.flex {
    display: flex;
    /* Allinea gli elementi al punto cross start del cross axis. */
    align-items: flex-start;
}

3.2 align-item: flex-center

La proprietà align-item: center consente di allineare gli elementi del contenitore al centro del del cross axis.

A
B
C
.flex {
    display: flex;
    /* Allinea gli elementi a centro del cross axis. */
    align-items: center;
}

3.3 align-item: flex-end

La proprietà align-item: flex-end consente di allineare in basso gli elementi del contenitore, a partire dal punto cross end del cross axis.

A
B
C
.flex {
    display: flex;
    /* Allinea gli elementi al punto crss end del cross axis. */
    align-items: flex-end;
}

3.4 align-item: flex-stretch

La proprietà align-items: stretch è una proprietà molto utile perché consente di allungare gli elementi del contenitore affinché si adattino, in maniera omogenea alla lunghezza del cross axis, indipendentemente dal loro contenuto.

A
B
C
.flex {
    display: flex;
    /* Allunga gli elementi per tutta la lunghezza del cross axis. */
    align-items: flex-stretch;
}

3.5 align-item: baseline

La proprietà align-item: baseline consente di allineare gli elementi interni al contenitore alla baseline3 dei caratteri (tratteggiata) rispetto al cross axis.

A
B
C

3.6 Nota sul cambiamento di direzione del main axis

Se si imposta la proprietà flex-direction: column, che traspone la direzione del main axis (tratteggiato in figura) rispetto a quella del cross axis, si otterrà che gli elementi disposti con la proprietà align-item saranno allineati rispetto a un cross axis che corre orizzontalmente lungo il contenitore.

Si noti la differenza nella disposizione degli elementi dell’esempio che segue, dove è stata impostata la proprietà align-item: center e la proprietà flex-direction: column, rispetto a quanto descritto nel paragrafo 3.2.

A
B
C
.flex {
    display: flex;
    /* Direzione del main axis dall'alto verso il basso. */
    flex-direction: column;
    /* Allinea gli elementi al centro del cross axis. */
    align-items: center;
}

Si noti la differenza nella disposizione degli elementi dell’esempio che segue, dove è stata impostata la proprietà align-item: stretch e la proprietà flex-direction: column, rispetto a quanto descritto nel paragrafo 3.4.

A
B
C
.flex {
    display: flex;
    /* Direzione del main axis dall'alto verso il basso. */
    flex-direction: column;
    /* Allunga gli elementi per tutta la lunghezza del cross axis. */
    align-items: stretch;
}

4. La proprietà justify-content

La proprietà justify-content definisce la modalità con cui il browser distribuisce gli spazi lungo il main axis tra gli elementi di un contenitore flessibile.

4.1 justify-content: flex-start

La proprietà justify-content: flex-start consente di disporre gli elementi interni al contenitore a partire dall’inizio del main axis, uno dopo l’altro, senza modificare lo spazio tra gli elementi adiacenti. Nell’esempio, per gli elementi interni al contenitore è impostata la proprietà margin-right: 10px.

A
B
C
.flex {
    display: flex;
    /* Elementi allineati all'inizio del main axis senza spazi tra loro. */
    justify-content: flex-start;
}

4.2 justify-content: center

La proprietà justify-content: center consente di disporre gli elementi interni al contenitore a partire dal centro del main axis, uno dopo l’altro, senza modificare lo spazio tra gli elementi adiacenti. Nell’esempio, per gli elementi interni al contenitore è impostata la proprietà margin-left: 10px.

A
B
C
.flex {
    display: flex;
    /* Elementi allineati al centro del main axis senza spazi tra loro. */
    justify-content: center;
}

4.3 justify-content: flex-end

La proprietà justify-content: flex-end consente di disporre gli elementi interni al contenitore a partire dalla fine del main axis, uno dopo l’altro, senza modificare lo spazio tra gli elementi adiacenti. Nell’esempio, per gli elementi interni al contenitore è impostata la proprietà margin-right: 10px.

A
B
C
.flex {
    display: flex;
    /* Elementi allineati alla fine del main axis senza spazi tra loro. */
    justify-content: flex-end;
}

Si noti la differenza con gli elementi disposti utilizzando la proprietà flex-direction: row-reverse illustrata al paragrafo 2.2.

4.4 justify-content: space-around

La proprietà justify-content: space-around consente di distribuire uniformemente, lungo il main axis, gli elementi interni al contenitore. Lo spazio tra gli elementi adiacenti è lo stesso mentre lo spazio prima del primo elemento (A) e dopo l’ultimo elemento (C) è pari alla metà dello spazio tra ogni coppia di elementi adiacenti. Per gli elementi interni al contenitore dell’esempio non è impostata alcuna proprietà margin.

A
B
C
.flex {
    display: flex;
    /* Distribuisce omogeneamente gli spazi tra elementi adiacenti. */
    justify-content: space-around;
}

4.4 justify-content: space-between

La proprietà justify-content: space-between consente di distribuire uniformemente, lungo il main axis, gli elementi interni al contenitore. Lo spazio tra gli elementi adiacenti è lo stesso mentre il primo elemento (A) è allineato all’inizio del main axis e l’ultimo elemento (C) alla fine del main axis. Per gli elementi interni al contenitore dell’esempio non è impostata alcuna proprietà margin.

A
B
C
.flex {
    display: flex;
    /* Distribuisce omogeneamente gli spazi tra elementi adiacenti. */
    justify-content: space-between;
}

5. La proprietà align-content

La proprietà align-content determina la modalità con cui il browser distribuisce gli spazi tra le righe di un contenitore flessibile lungo il cross axis.

5.1 align-content: flex-start

La proprietà align-content: flex-start consente di disporre le righe all’interno del contenitore a partire dal punto cross start del cross axis, una di seguito all’altra, senza modificare lo spazio tra le righe adiacenti. Nell’esempio, per gli elementi interni al contenitore è impostata la proprietà margin-right: 10px e `margin-bottom: 10px.

A
B
C
D
E
F
G
H
I
L
M
N
.flex {
    display: flex;
    /* Allinea le righe a partire dal punto cross start del cross axis. */
    align-content: flex-start;
}

5.2 align-content: center

La proprietà align-content: center consente di disporre le righe all’interno del contenitore a partire dal centro del cross axis, una di seguito all’altra, senza modificare lo spazio tra le righe adiacenti. Nell’esempio, per gli elementi interni al contenitore è impostata la proprietà margin: 5px 10px 5px 0.

A
B
C
D
E
F
G
H
I
L
M
N
.flex {
    display: flex;
    /* Allinea le righe a partire dal centro del cross axis. */
    align-content: center;
}

5.3 align-content: flex-end

La proprietà align-content: flex-end consente di disporre le righe all’interno del contenitore a partire dal punto cross end del cross axis, una di seguito all’altra, senza modificare lo spazio tra le righe adiacenti. Nell’esempio, per gli elementi interni al contenitore è impostata la proprietà margin-right: 10px e `margin-top: 10px.

A
B
C
D
E
F
G
H
I
L
M
N
.flex {
    display: flex;
    /* Allinea le righe a partire dal punto cross end del cross axis. */
    align-content: flex-end;
}

5.4 align-content: space-around

La proprietà align-content: space-around consente di disporre uniformemente, lungo il cross axis, le righe all’interno del contenitore flex. Lo spazio tra le righe adiacenti è lo stesso mentre lo spazio prima della prima riga e dopo l’ultima riga è pari alla metà dello spazio tra ogni coppia di righe adiacenti. Per gli elementi interni al contenitore dell’esempio non è impostata alcuna proprietà margin.

A
B
C
D
E
F
G
H
I
L
M
N
.flex {
    display: flex;
    /* Allinea le righe omogeneamente lungo il cross axis. */
    align-content: space-around;
}

5.5 align-content: space-between

La proprietà align-content: space-between consente di disporre uniformemente, lungo il cross axis, le righe all’interno del contenitore flex. Lo spazio tra le righe adiacenti è lo stesso mentre la prima riga è allineata al punto cross start e l’ultima riga al punto cross end. Per gli elementi interni al contenitore dell’esempio non è impostata alcuna proprietà margin.

A
B
C
D
E
F
G
H
I
L
M
N
.flex {
    display: flex;
    /* Allinea le righe omogeneamente lungo il cross axis. */
    align-content: space-between;
}

5.4 align-content: stretch

La proprietà align-content: space-stretch consente di allungare le righe all’interno del contenitore flex, affinché le rispettive altezze si adattino in modo omogeneo alla lunghezza del cross axis, indipendentemente dal loro contenuto.

A
B
C
D
E
F
G
H
I
L
M
N
.flex {
    display: flex;
    /* Ripartisce uniformemente l'altezza delle righe lungo il cross axis. */
    align-content: stretch;
}

6. La proprietà flex-wrap

La proprietà flex-wrap forza gli elementi interni al contenitore a rimanere su una riga o ad andare a capo su più righe del cross axis qualora la sommatoria delle lunghezze (width+ padding+ margin) dei singoli elementi ecceda la lunghezza del main axis del contenitore.

6.1 flex-wrap: wrap

La proprietà flex-wrap: wrap forza gli elementi ad andare a capo su più linee lungo il cross axis. Nell’esempio, per allineare il contenuto del contenitore in alto rispetto all’origine del main axis è stata impostata la proprietà align-content: flex-start.

A
B
C
D
E
F
.flex {
    display: flex;
    /* Forza la disposizione degli elementi su più righe */
    flex-wrap: wrap;
    /* Allinea le righe a partire dal punto cross start del cross axis. */
    align-content: flex-start;
}

A titolo di esempio, se si combina la proprietà flex-wrap con justify-content: center e align-content: center gli elementi saranno disposti a partire dal centro del main axis, forzati ad andare a capo e disposti a partire dal centro del cross axis, ottenendo il seguente risultato (cfr. paragrafo 4.2).

A
B
C
D
E
F
.flex {
    display: flex;
    /* Forza gli elementi su più righe */
    flex-wrap: wrap;
    /* Elementi allineati all'inizio del main axis senza spazi tra loro */
    justify-content: center;
    /* Allinea le righe a partire dal centro del cross axis. */
    align-content: center;
}

6.2 flex-wrap: wrap-reverse

La proprietà flex-wrap: wrap-reverse forza gli elementi ad andare a capo su più linee lungo il cross axis, permutando la disposizione dei punti cross start e cross end. Poiché il punto di inizio e quello di fine sono invertiti, ovvero il punto cross start è disposto in basso, mentre il punto cross end in alto, per allineare il contenuto del contenitore in basso si dovrà utilizzare la proprietà flex-start anziché flex-end.

A
B
C
D
E
F
.flex {
    display: flex;
    /* Forza gli elementi su più righe permutando i punti cross start e cross end.*/
    flex-wrap: wrap-reverse;
    /* Allinea le righe a partire dal punto cross start del cross axis. */
    align-content: flex-start;
}

6.3 flex-wrap: nowrap

La proprietà flex-wrap: nowrap forza gli elementi a rimanere in un’unica linea lungo il cross axis adattandone la lunghezza affinché non ecceda quella del contenitore.

A
B
C
D
E
F
.flex {
    display: flex;
    /* Forza gli elementi su un'unica riga */
    flex-wrap: nowrap;
}

7. La proprietà flex-flow

La proprietà flex-flow è una scorciatoia che consente di impostare in un’unica dichiarazione le proprietà flex-direction e flex-wrap.

.flex {
    display: flex;
    flex-flow: row nowrap;
}
A
B
C
D
E
F

8 Proprietà degli elementi interni al contenitore flex

Le proprietà descritte fino a questo punto sono dichiarate a livello di CSS per il contenitore flessibile (elemento parent) determinando la disposizione dei suoi elementi interni. È però possibile determinare il comportamento dei singoli elementi interni attraverso le seguenti proprietà.

  • flex-grow
  • flex-shrink
  • flex-basis
  • order
  • align-self
  • flex

8.1 La proprietà flex-grow

La proprietà flex-grow determina il fattore di crescita di un elemento flessibile e specifica quanto dello spazio rimasto a disposizione nel contenitore dovrebbe essere assegnato all’elemento.

A
B
C
.flex {
    display: flex;
}
.flex > div:nth-child(1) {
    flex-grow: 0.8;
}

Nell’esempio il fattore di crescita del primo elemento, che ha una lunghezza definita di 150px, è impostato a 0.8.


8.2 La proprietà flex-shrink

La proprietà flex-shrink determina il fattore di restringimento di un elemento flessibile.

A
B
C
.flex {
    display: flex;
}
.flex > div:nth-child(1) {
    flex-shrink: 2;
}

L’elemento (A) dell’esempio ha un fattore di restringimento impostato a 2 ed è più piccolo degli altri due.


8.3 La proprietà flex-basis

La proprietà flex-basis determina la lunghezza iniziale di un elemento flessibile. Nell’esempio, la lunghezza del primo elemento (A) è stata impostata a 75px rispetto alla lunghezza degli altri elementi di `150px.

A
B
C
.flex {
    display: flex;
}
.flex > div {
    width: 150px;
}
/* Modifica la lunghezza iniziale del primo elemento. */
.flex > div:first-child() {
    flex-basis: 75px;
}

8.4 La proprietà order

La proprietà order determina l’ordine della disposizione di un elemento flessibile rispetto all’ordine di dichiarazione degli elementi nel codice HTML.

A
B
C
D

Gli elementi dell’esempio sono dichiarati all’interno del codice HTML nell’ordine A, B, C e D:

<div class="flex">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

Per modificarne l’ordine rispetto a quanto dichiarato nell’HTML è sufficiente definire la proprietà order nel seguente modo:

.flex {
    display: flex;
}
.flex > div:nth-child(1) {
    order: 3;
}
.flex > div:nth-child(2) {
    order: 1;
}
.flex > div:nth-child(3) {
    order: 4;
}
.flex > div:nth-child(4) {
    order: 2;
}

8.5 La proprietà align-self

La proprietà align-self specifica l’allineamento di un elemento flessibile sovrascrivendo il valore della proprietà align-items dichiarata a livello di contenitore.

A
B
C
D

8.6 La proprietà flex

La proprietà flex è una scorciatoia che consente di impostare in un’unica dichiarazione le proprietà flex-grow, flex-shrink, and flex-basis.


9. Un pratico esempio

Come ho spiegato all’inizio, le proprietà del Flexible Box Layout Module consentono di implementare agevolmente layout più o meno complessi a partire da poche righe di codice CSS. Consideriamo le seguenti dichiarazioni:

.flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.flex__item {
    height: 100%;
    flex-flow: row nowrap;
    align-items: center;
}

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

Questo semplice set consente di implementare un layout ricorrente, rappresentato in figura, dove in pratica si ha la necessità di adattare automaticamente in lunghezza un dato elemento – nell’esempio l’elemento (C) – affinché riempia tutto lo spazio residuo del contenitore.

A
B
C
D
<div class="flex">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item--adaptive">C (elemento adattivo)</div>
    <div class="flex__item">C</div>
</div>

Che significa in pratica elemento adattivo? Immaginiamo di voler creare un contenitore flessibile con degli elementi interni standard, sfruttando le classi CSS che dichiarate poco sopra. Il risultato è il seguente, ovvero una riga di elementi adiacenti, allineati a sinistra, con uno spazio residuo vuoto tra l’elemento (D) e il margine destro del contenitore.

A
B
C
D

Se si volesse riempire il contenitore, forzando uno degli elementi ad allungarsi in maniera adattiva, ad esempio l’elemento (A), basta utilizzare il seguente codice.

<div class="flex">
    <div class="flex__item--adaptive">A (elemento adattivo)</div>
    <div class="flex__item">B</div>
    <div class="flex__item-">C</div>
    <div class="flex__item">C</div>
</div>

In tal modo si ottiene il seguente layout, in questo caso forzando l’elemento (A) ad allungarsi per tutto lo spazio residuo del contenitore e a spingere gli elementi alla sua destra verso il margine destro del bordo.

A
B
C
D

Questa struttura risulta molto pratica in diverse circostanze molto ricorrenti, come nel caso della disposizione degli elementi all’interno di una top bar o di una lista orizzontale, a seconda del loro ruolo.


10. Conclusioni

Come detto all’inizio, le proprietà del CSS Flexible Box Layout Module consentono di accelerare gli sviluppi in un’ottica di semplicità e riusabilità del codice. Tipicamente, all’interno di un progetto, basta un mix ragionato delle suddette proprietà per ottenere, in non più di una ventina di linee di codice CSS, le dichiarazioni necessarie a coprire tutte le esigenze di layout. Ecco perché è utile padroneggiarle e soprattutto spendere un po’ di tempo nel definire un set di classi riusabili, ciascuno secondo le proprie esigenze, in modo tale da poterne disporre ogni volta in cui se ne ha bisogno. Lascio a voi i possibili mix ottenibili dalle diverse combinazioni delle proprietà del modulo. Per qualsiasi chiarimento o precisazione, lasciate un commento o contattatemi.

Note finali


  1. Phil Karlton, Has Phil Karlton ever said “There are only two hard things in Computer Science: cache invalidation and naming things”? 
  2. La direzione dell’orientamento da destra verso sinistra, piuttosto che da sinistra verso destra, è determinata dalla presenza nel container dell’attributo dir. Se tale attributo è impostato a rtl la proprietà flex-direction: row-reverse ordinerà gli elementi da sinistra a destra, ovvero nella direzione opposta rispetto a quanto illustrato nell’esempio. 
  3. Baseline, La baseline, o linea di base o anche linea d’appoggio, è la linea immaginaria sulla quale la maggior parte delle lettere si allineano verticalmente ed oltre la quale si estendono i tratti discendenti[^3] 

Commenti