Vediamo ora una modalità per gestire il layout in modo flessibile.

Flex Box è una tecnologia relativamente nuova, è stata introdotta infatti solamente nel duemila quindici che sembra tantissimo tempo fa, ma in realtà pensando che il CSS esiste dagli anni novanta, è una tecnologia relativamente nuova.

In effetti, solo di recente ha raggiunto un ottimo supporto da parte dei browser.

È vediamo qui nella slide che C' è un link ad un sito molto utile per noi sviluppatori che si chiama letteralmente.

Posso utilizzare questo sito ci fa vedere per ogni proprietà per ogni tecnologia che vogliamo utilizzare la compatibilità dei browser, quindi chiaramente quando vediamo un riquadri no verde significa che c' è pieno supporto.

Quando è un verdino più scuro è un supporto parziale rosso chiaramente non è supportato.

Vediamo che comunque tutti i browser moderni supportano pienamente flex, quindi vediamo un pochettino come funziona la Xbox.

Dunque ci sono dei concetti di base da da capire per cominciare a utilizzare Flex Box.

Quello che dobbiamo fare è creare un contenitore che sarà chiamato Flex Container, che sarà appunto il genitore di tutti gli item che vogliamo posizionare.

Quindi gli elementi figli di questo flax container saranno chiamati Flex item e quindi questi elementi potranno essere posizionati in modo flessibile, in modo che si possano adattare più facilmente agli schermi e ai diversi dispositivi.

Perché è così rivoluzionario? Perché è così eccezionale Flack Xbox? Perché permette di posizionare molto facilmente gli elementi in modo orizzontale e verticale.

Questa era una cosa che prima del duemila quindici prima di flex box non era così semplice, soprattutto allineare gli elementi verticalmente.

Inoltre, come abbiamo già detto, i flakes item hanno dimensioni flessibili e si adattano.

Si adattano benissimo tutto lo spazio disponibile.

Quindi il primo concetto importante è che la proprietà display flax è una proprietà che viene assegnata al contenitore, quindi noi vogliamo posizionare gli elementi per posizionarli tramite appunto Flex Box.

Dobbiamo assegnare la proprietà Display Flex al contenitore, quindi al flakes container.

In questo esempio vediamo il re quadrino azzurro che è appunto il flax container é l'unica proprietà che gli viene assegnata è proprio display flex.

I quadrini blu più scuri che ci sono all'interno sono chiamati appunto Flex item.

Questi subiscono il posizionamento del loro contenitore.

Ci sono un paio di concetti chiave riguardo flex.

Il primo è il main axis che l'asse principale quindi non esiste piu' il concetto di orizzontale e verticale destra sinistra con flex box le cose sono tutte gestite lungo un asse principale, appunto chiamato main Axis.

É un asse perpendicolare che si chiama cross axis, quindi è l'asse secondario.

Le dimensioni dei flax item sono quindi rappresentate dalla main.

Sai che la dimensione lungo l'asse principale é la cross che la dimensione lungo l'asse perpendicolare.

Quindi il primo concetto è stabilire la direction di questo flax proprio perché non c' è più il concetto di orizzontale verticale, ma c' è il concetto di riga e colonna.

Quindi di default quando noi diamo la proprietà display flex ad un contenitore, tutti gli elementi vengono disposti sulla stessa riga.

E già questa è una cosa rivoluzionaria, perché noi sappiamo che i nostri sono degli elementi blocco e naturalmente occuperebbero l'intera riga.

Quindi posizionando tre uno sotto all'altro come in questo esempio andrebbero a finire una sotto all'altro.

Se invece diamo il display flex al contenitore, questi elementi si posizionano gia' sulla stessa riga senza dover dare nessun altro tipo di proprietà.

La Flex Direction ro è la proprietà che viene data di default senza specificare nulla.

Quindi, ritornando al concetto di Mexes e Cros Axis.

Se la flex direction è appunto o il main axis è orizzontale, é perpendicolare al main axis troviamo il cross axis in verticale.

Parlando delle dimensioni dei flax item avremo la max che coincide con la larghezza della item e la cross che coincide con l' trezza dell' item.

Se poi decidiamo di dare una Flex Direction Colum al nostro contenitore flex, tutto si ribalta.

Quindi il main axis diventa verticale e il cross axis che l'asse perpendicolare diventa orizzontale.

Quindi, come ci dice il nome Flex Direction Colum che cosa significa? Significa che gli elementi, anziché posizionarsi sulla stessa riga, si posizionano in colonna, quindi facendo discorso anche con le dimensioni del flex item se mexes verticale la mins con la flex direction colum corrisponde all' LTE zza del del the light em, mentre la cross corrisponde alla larghezza.

C'è poi la possibilità di stabilire il comportamento degli item all'interno del contenitore quando ce n'è più di uno.

Quindi quando abbiamo diversi item possiamo stabilire se questi item devono naturalmente andare a capo, disporsi su su più file o su più colonne oppure se invece devono stringersi per ingombrare solamente un'unica fila vediamo degli esempi.

Riprendiamo il nostro Index html e vediamo come come utilizzare appunto Flex Box.

Abbiamo ripulito il nostro body e nel nostro foglio di stile abbiamo semplicemente la regola che resetta tutti i margini.

Tutti padding e impone il boxing board del box, quindi un reset delle dimensioni che verrebbero date dal browser.

Quindi abbiamo detto che per creare appunto un contenitore flex, ora lo chiamiamo container Flex container.

Questo insomma è una classe che possiamo stabilire in base a anche al resto di classe che abbiamo nel nostro file.

Quindi io adesso creo un container e degli item all'interno, quindi lo possiamo anche copiare, incollare chiaramente andiamo a capo.

Cerchiamo di mantenere sempre il nostro codice bello pulito e ordinato.

Quindi abbiamo detto Il nostro container deve avere display flex.

Ora, per fare questi esempi daremo delle dimensioni e un colore di sfondo il nostro contenitore.

Poi, chiaramente, quando si tratta di posizionare gli elementi di un layout, avranno il loro contenuto, avranno i loro colori.

Ora, noi facciamo solo degli esempi per capire come funziona Flex.

Quindi diamo una larghezza al contenitore di ad esempio cinquecento pixel e un'altezza di trecento pixel creiamo un rettangolo.

Ripeto, queste sono delle dimensioni fisse.

Solamente per fare degli esempi diamo un colore di sfondo, ad esempio light blue, quindi un rettangolo azzurro e aggiornando la pagina eccolo qui già vediamo il nostro rettangolo, quindi queste dimensioni questo colore di sfondo ci serve solo per circoscrivere il nostro container.

Quindi andiamo a stilare anche gli item, perché altrimenti questi div, essendo privi di contenuto, non si vedono in pagina.

Anche a questi diamo una suite di ad esempio cinquanta pixel, un hit di cinquanta pixel, quindi crediamo creiamo dei quadratini e assegniamo un bel gran collo blu.

Aggiorniamo la pagina e ora troviamo già i nostri quadratini posizionati sulla stessa riga.

Questo perché il nostro contenitore al display flex possiamo anche dare un colore di un colore del bordo bianco, ad esempio per poterli distinguere meglio perché adesso viene fuori un unico rettangolo blu perché sono tutti attaccati, ovviamente.

Eccoli qua, quindi adesso si distinguono molto meglio i rettangoli, i quadratini con il bordino bianco.

Quindi appunto, con questa proprietà display flex vediamo che i quadratini si posizionano sulla stessa riga.

Commentando questo display flex i quadratini diventano dei semplici blocchi, quindi dei blocchi naturali che quindi, come abbiamo visto, si dispongono uno sotto l'altro perché occuperebbero tutta la riga dando al display flex di default.

La direzione dei flex item è roo, quindi di default si posizionano sulla stessa riga.

Se noi diamo una Flex Direction Colum, aggiorniamo la pagina e vediamo che i quadratini si posizionano proprio in colonna.

Per provare la proprietà del flex rap aumentiamo la quantità dei nostri quadratini, quindi ne copio incollo tanti e vediamo che succede.

Torniamo con la Flat Direction Raula Possiamo specificare in modo esplicito quindi scrivere Flex Direction o possiamo anche toglierla se se la commentiamo.

Sappiamo che la directioner o di default.

Quindi ora vediamo che con la Flex Direction ro, avendo molti quadratini all'interno del nostro contenitore, questi ora si stringono e cercano di stare tutti sulla stessa riga.

Quindi vediamo che non sono più dei quadratini perfetti.

Nonostante io abbia dato delle dimensioni fisse, possiamo aumentare ancora di più i quadratini per vedere ancora in modo più esplicito.

Eccoli qua.

Quindi si stringono sempre più per stare nella stessa riga.

La stessa cosa se ci fosse la Direction Kollam quindi si posizionerà, Ebbero tutti sulla stessa colonna e tutti.

Quindi è molto piccolini anche in altezza.

Quindi sembra che le dimensioni che io ho dato non non siano le dimensioni effettive.

E questo è proprio il concetto chiave di Flex box anche nel nome Flakes Box, quindi è un contenitore flessibile, quindi gli item cercano, per quanto possibile di seguire le direttive che noi diamo.

Però cercano di adattarsi il più possibile al contenitore per non guardare, ad esempio.

Quindi se noi invece volessimo che queste dimensioni rimangano effettive, quindi i nostri quadratini rimangano dei veri quadratini.

Dovremmo appunto mandarli a capo o creare diverse righe diverse colonne.

Quindi, tornando sulla Flax Direction Ro, possiamo dare sempre il contenitore è la proprietà Flex rap rap.

Quindi aggiorniamo la pagina e vediamo questa volta che i quadratini rimangono effettivamente delle dimensioni prestabilite.

Quindi cinquanta pixel per cinquanta pixel e dove non non ci sta piu' un quadratino, comincia una seconda fila e vanno a capo la stessa cosa succede se la Direction è Colum, quindi vengono a crearsi diverse colonne all'interno del nostro contenitore Flex