Flexbox

I flexbox rendono più semplice la creazione di pagine web con elementi “fluttuanti” senza la necessità di utilizzare attributi come float e position. Con i flexbox abbiamo 2 componenti:

• flex container: è l'elemento HTML che fa da contenitore degli elementi da disporre nella pagina;
• flex element: è l'elemento HTML contenuto in un flexbox.

Per creare una disposizione con flexbox è necessario inserire, innanzitutto, un flex container. All'interno di un flex container ci possono stare uno o più flex elements.

Il flex container

Il flex container può essere, ad esempio, un elemento div e ha le seguenti proprietà:

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

display

Per rendere un div o un altro elemento HTML un flex container, si utilizza la proprietà display impostata a flex:

#wrapper {
    display: flex;
}

flex-direction

Un flex container può disporre gli elementi in:

rigariga (invertita)colonnacolonna (invertita)

da sinistra verso destra con flex-direction: row

1

2

3

4

riga (invertita): da destra verso sinistra con flex-direction: row-reverse

1

2

3

4

dall'alto verso in basso con flex-direction: column

1

2

3

4

dal basso verso l'alto con flex-direction: column-reverse

1

2

3

4

flex-wrap

Se il container non è abbastanza grande per contenere i suoi elementi, anche a seguito del ridimensionamento della pagina web, si può decidere il comportamento degli elementi contenuti nel flex. Se si vuole mantenere la disposizione degli elementi tutti su una sola colonna o riga e che i flex element si restringano semplicemente si può usare flex-wrap: nowrap. Se, invece, si vuole che gli elementi si riposizionino mantenendo le loro dimensioni originali, si può usare flex-wrap: wrap.

row wraprow nowrapcolumn wrapcolumn nowrap

1

2

3

4

5

6

7

8

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

1

2

3

4

5

6

7

8

div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

1

2

3

4

div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

1

2

3

4

div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

flex-flow

Scorciatoia per impostare sia la direzione che il comportamento nel caso di ridimensionamento della pagina. Esempio:

flex-flow: column wrap;

justify-content

Permette di specificare l'allineamento degli elementi all'interno del flex container:

• Allineamento al centro: justify-content: center
• Allineamento all'inizio del container: justify-content: flex-start
• Allineamento alla fine del container: justify-content: flex-end
• Riempimento del container con gli elementi, ma con spazio prima del primo elemento e dopo l'ultimo: justify-content: space-around
• Riempimento del container con gli elementi, ma con spazio solo tra gli elementi: justify-content: space-between

centerflex-startflex-around

1

2

3

4

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
}

1

2

3

4

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

1

2

3

4

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

align-items

Permette di specificare l'allineamento degli elementi verticalmente all'interno del flex container:

• Allineamento al centro: align-items: center
• Allineamenro in alto: align-items: flex-start
• Allineamento in basso: align-items: flex-end
• Riempimento del flex container (default): align-items: stretch
• Allineamento rispetto alla linea di base del contenuto: align-items: baseline

centerflex-startstretchbaseline

Gli elementi flex sono allineati al centro del container

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

Gli elementi flex sono allineati alla parte alta del container

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

Gli elementi flex sono allungati per riempire il container

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

Gli elementi flex sono allineati rispetto alla parte bassa del loro contenuto (il testo in questo esempio)

1

2

3

4

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: space-around;
}

align-content

Modifica lo spazio presente verticalmente tra le linee di elementi nel flex container. A differenza di align-items che si riferisce ai singoli elementi del container, align-content si riferisce alle righe formate dagli elementi:

• Righe con lo stesso spazio tra loro: align-content: space-between
• Righe con lo spazio prima, dopo e nel mezzo: align-content: space-around
• Righe distribuite per riempire il container (default): align-content: stretch
• Righe allineate al centro: align-content: center
• Righe allineate all'inizio del container: align-content: flex-start
• Righe allineate alla fine del container: align-content: flex-end

centerflex-startstretchspace-around

Il gruppo delle righe di elementi è allineato al centro

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
}

Il gruppo di righe di elementi flex è allineato alla parte alta del container

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

Il gruppo di righe &egrvae; allungato per riempire il container

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
}

È aggiunto spazio prima e dopo il gruppo di righe e nel mezzo (tra le righe)

1

2

3

4

5

6

7

div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
}