Vuoi imparare flexbox ma ti annoi? Prova questo gioco
Tutti abbiamo sentito parlare di flexbox, spero, è una nuova spec di css3 che permette di organizzare gli elementi di una pagina web in maniera più semplice rispetto a prima. Nonostante sia una feature per così dire moderna è ben supportata da tutti i browser (anche mobile!).
Forse il motivo per cui è poco utilizzata è che tecnologie come Bootstrap risolvevano il 95% dei problemi che risolve flexbox; solo che bootstrap fa tutto “vecchia scuola”.
Il problema di queste nuove “feature” è che bisogna impararle, e non c’è altro modo che studiarle (dal web), provarle, o … giocarle.
E’ proprio tramite un simpatico giochino (flexbox defense) che ho imparato i concetti base del flexbox model; Invito tutti ad andare sul sito e a provare ad arrivare all’ultimo quadro con il 100% dei punti fatti. (come me).
Come si gioca
Bisogna posizionare dei cannoni su una mappa per distruggere i nemici che percorrono il sentiero marrone. I cannoni non possono essere posti sui sentieri ma solo negli spazi verdi. Come posizionarli? Bisogna utilizzare il css e in particolare le proprietà flexbox suggerite quadro per quadro.
Curiosità: non avevo idea di come funzionassero i flexbox prima di oggi, ma grazie al giochino ora mi sento piuttosto sicuro di come funziona.
Cheatsheet
una volta che avrete giocato, e vinto, vorrete ricapitolare le informazioni da qualche parte. Eccole qui.
display: flex
è la property da dare a un div. Da quel momento si comporterà seguendo le regole del flexbox model.
**justify-content
**
Distribuisce gli elementi orizzontalmente in base alle regole specificate.
flex-start: Raggruppa gli elementi nella parte sinistra (l’inizio) del contenitoreflex-end: Raggruppa gli elementi nella parte destra del contenitorecenter: Raggruppa gli elementi al centro del contenitorespace-between: Distribuisce equamente gli elementi nel contenitore in modo ch il primo elemento si allinea a sinistra e l’ultimo elemento si allinea a destraspace-around: Distribuisce equamente gli elementi nel contenitore in modo che tutti gli elementi abbiano lo stesso spazio intorno a loro
**align-items
**
Distribuisce gli elementi verticalmente.
flex-start: Allinea gli elementi sul top del contenitoreflex-end: Allinea gli elementi sul fondo del contenitorecenter: Allinea gli elementi al centro del contenitorebaseline: Allinea gli elementi sulla baseline del contenitorestretch: Allarga gli elementi per riempire il container
**flex-direction
**
permette di modificare la distribuzione spaziale degli elementi. Con column e column-reverse si invertiranno i comportamenti delle due proprietà: justify-content impilerà gli elementi verticalmente e align-items li organizzerà orizzontalmente.
row: Dispone gli elementi da sinistra a destrarow-reverse: Dispone gli elementi da destra a sinistracolumn: Dispone gli elementi dall’alto verso il bassocolumn-reverse: Dispone gli elementi dal basso verso l’alto
**Order
**
La proprietà order può essere applicata ai singoli item e serve per modificarne la posizione all’interno della disposizione naturale. Ogni item inizia la numerazione da 0, quindi specificando -1 lo si sposterà più a sinistra (mentre dandogli +1 lo si sposterà a destra).
Align-self
E’ sempre un attributo pensato per il signolo item. Ha le stesse proprietà (e comportamenti) di align-items, ma viene applicato all’elemento singolo (mentre align-items si applica a gruppi di oggetti.
