07.10.2016

Flex grid – definire gli allineamenti e la disposizione degli oggetti [5]

Michele Settembre - web work - flex grid

Per la definizione e gli allineamenti di oggetti flessibili all’interno di un contenitore è indispensabile tenere conto della direzione del flusso del contenitore.

Due esempi pratici per capire la differenza di configurazione di oggetti in uno scorrimento orizzontale e verticale.

Disposizione in righe degli oggetti nel contenitore su più righe

Scorrimento orizzontale di dieci oggetti flessibili all’interno di un contenitore che determina il loro allineamento orizzontale che inizia dalla sorgente flex e allineamento verticale che inizia dalla sorgente flex (da sinistra e dall’alto)

1
2
3
4
5
6
7
8
9

Scorrimento orizzontale di dieci oggetti flessibili all’interno di un contenitore che determina il loro allineamento orizzontale che inizia dal centro flex e allineamento verticale che inizia dalla sorgente flex (centrale e dall’alto)

1
2
3
4
5
6
7
8
9

Scorrimento orizzontale di dieci oggetti flessibili all’interno di un contenitore che determina il loro allineamento orizzontale che inizia dalla fine flex e allineamento verticale che inizia dalla sorgente flex (da destra e dall’alto)

1
2
3
4
5
6
7
8
9

Disposizione in colonna degli oggetti nel contenitore su più colonne

Scorrimento in colonna di dieci oggetti flessibili all’interno di un contenitore che determina la loro distribuzione che inizia dalla sorgente flex e allineamento che inizia dalla sorgente flex (da sinistra e dall’alto)

1
2
3
4
5
6
7
8
9

Scorrimento in colonna di dieci oggetti flessibili all’interno di un contenitore che determina la loro distribuzione che inizia dal centro flex e allineamento che inizia dalla sorgente flex (dal centro e dall’alto)

1
2
3
4
5
6
7
8
9

Scorrimento in colonna di dieci oggetti flessibili all’interno di un contenitore che determina la loro distribuzione che inizia dalla fine flex e allineamento che inizia dalla sorgente flex (da destra e dall’ato)

1
2
3
4
5
6
7
8
9

Conclusioni

La properità justify-content determina la disposizione degli oggetti lungo la linea della direzione, per contenitori con flow in colonne la proprietà justify-content: flex-start; determina che l’allineamento coincida con la sorgente della linea del flusso cioè dall’alto. Per un flusso in riga la stessa proprietà determina con lo stesso principio che la disposizione inizi da sinistra. Al contempo la proprietà align-items si preoccupa della posizione lungo la linea del flusso in senso verticale, attenzione, in un flusso già verticale la proprietà align-items ha la sua rappresentazione sull’orizzontale della vista, è un po’ come se osservando tre oggetti in colonna, per capire la proprietà align-items ruotassimo la testa di 90 gradi in senso orario e rivalutassimo la verticale di questi oggetti. 

commenti