Lezione gratuita dal corso Web Development
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
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.