Ok, ora vediamo come creare un layout con Flex e Grid.

Andiamo a vedere effettivamente quali sono gli elementi che possiamo utilizzare.

All'interno.

Come vediamo qui abbiamo una section che si espande totalmente in tutto il contenitore e quando non ha effettivamente nessun tipo di dato, prende uno spazio che decide lui direttamente in maniera automatica.

Quando noi ridiamo un'altezza fissa come possono essere quaranta pixel, vediamo che il contenitore si rimpicciolisce, quindi in questo caso diamogli un colore per poterlo vedere e poterlo analizzare.

Quindi gli do un grigio ok e voglio che sia grande mille e quattrocento pixel e del contenitore diventano piccolino e diventa effettivamente di mille e quattrocento pixel.

Se poi ci spostiamo nelle altre diverse versioni vedete che i mille quattrocento pixel rimangono anche dall'altra parte, quindi vengono automaticamente ereditati dagli altri degli altri media qui che sono tablet mobili Land Scape é il nostro telefono.

Se noi invece tornassimo indietro e andassimo a definire una percentuale come il cento percento, vedete che il contenitore va a riprendere esattamente il cento per cento totale di tutta la ragazza fissa del sito.

Quindi questo vediamo invece serve, perché se vogliamo lavorare con delle percentuali totali per andare a riempire un contenitore è utile utilizzare questo, come anche ad esempio, andare a mettere un cinquanta percento.

Quindi si andò a prendere solamente metà di quel contenitore, andando più nel dettaglio degli altri elementi.

Abbiamo poi i container che si distinguono dalle section, dal fatto che l'icona l'icona e sono leggermente diverse.

Come vedete qua la section è fatta con due strisce e una in basso e una in alto.

Qui invece ci sono due strisce fate una destra e una sinistra.

Questo perché nel nostro caso del contenitore e il contenitore non può avere una lunga larghezza maggiore di un tot, quindi è automaticamente già settato nell'avere quel tipo di elementi dentro non possiamo crearlo e farlo diventare molto più grande per quello, cioè appunto la section stessa.

Noi abbiamo la grid, quindi all'interno il discorso delle griglie dove possiamo creare più colonne.

All'interno é anche piu' row, ovvero più linee e poi aggiustare anche il gap, ovvero la distanza che c' è tra una colonna, una griglia e l'altra, facendolo aumentare dei quattro pixel vedete che tutto diventa di ventiquattro e uguale allo stesso modo anche tu.

E se invece vogliamo avere una distanza diversa a livello d row, come ad esempio un otto pixel, possiamo direttamente inserirlo all'interno di questo.

Inoltre poi possiamo anche cercare di capire quale tipo di direzione andare a privilegiare se quella colonne oppure quella a roma.

Andando avanti vediamo l'altra tipologia di elemento, ovvero le columns columns all'interno possono essere trascinate come vedete in questo caso e possiamo averne più di una.

Quindi abbiamo l'esempio in questo caso di avere, come vedete qua dentro, diverse tipologie di colonne.

In questo caso lo voglio utilizzare quattro e poi posso spostarmi più o meno la colonna.

Quello che non si può fare con questa tipologia di visualizzazione è eliminare direttamente le colonne all'interno, ma bensì è appunto spostarle per riuscire ad avere più uno spazio a livello di colonne.

Questi quattro sono gli elementi principali che ci permetteranno di costruire un sito.

Pensi principalmente sempre utilizzato la section nel container utilizzo in alcune volte il grid e altre volte le colonne, ma molto, molto di meno.

Ora vediamo insieme gli elementi basici per entrare a lavorare sulle layout all'interno di weblog.

Quindi all'interno abbiamo creato le nostre action che vediamo qua all'interno e possiamo all'interno metterci dei block è il block non sono altro che dei piccoli elementi che si possono creare che si prendono una parte del contenitore, quindi possono avere prima di tutto una propria altezza fissa e precisa.

In questo caso io sto mettendo un blocco chi lo chiamo è di block, quindi il nome quando voi non lo date all' oggetto automaticamente prende il nome della classe stessa, quindi dello stile in questo caso è un deadlock l'altra, cosa che possiamo fare come per l'altro elemento è color arlo come questo quindi ad esempio è un rosso.

Possiamo avere anche molteplici di block all'interno di block block block vedete che l'uno si tutti quanti si vanno a spostare uno sotto l'altro all'interno della mia section.

Coloro che eliminasse poi la section anche di block, chiaramente andrebbero via perché sono all'interno di quel contenitore.

Questo lo possiamo spostare e inserire all'interno del contenitore che vediamo qui dentro.

Solitamente le section non possono avere all'interno elementi come il contenitore, quindi in questo caso, se io volessi avere scusate il contrario, se dovesse avere la section all'interno di un contenitore lo possa avere.

Ma questo è quello che si crea a livello di effetto, quindi la section all'interno prende tutto il contenitore.

In questo caso, come abbiamo dato il cinquanta percento.

Adesso vorrei che prendesse al cento per cento.

Ok.

E qui All'interno o i due e i miei due block.

Mettiamo caso che io posso utilizzare Voglio utilizzare la proprietà del Flax.

Quindi in questo caso è un po' come l'auto layout che è presente su Fig.

Ma e voglio dare una specifica differenza di larghezza tra una parte e l'altra qui.

Posso dire quanto devono essere distanti questi due blocchi? Quindi questo caso venti pixel l'uno dall'altro il contenitore.

Gli diciamo al cento per cento il contenitore di questo diciamo cento per cento.

Okay, il contenitore sopra gli do un in pixel, centoventi pixel e automaticamente la section che quella colorata Vedete che si prende il cento percento dello spazio.

Dovessi avere cinquanta si prenderebbe il cinquanta percento dello spazio.

Quindi all'interno della Section.

Abbiamo altre block.

Se io continuo ad aggiungerli block all'interno di questa mia sezione, quello che vedrò è il testo che continuamente inizia a crearsi qui all'interno di block un'altra di blocco interno e man mano li posso vedere tutti se io volendo, posso prendere questi e portarmi da una parte all'altra.

Okay, quindi una volta che abbiamo i nostri di block all'interno possiamo vedere come un elemento può lavorare con flex all'interno di una sezione.

Andiamo a vedere anche gli altri elementi, ad esempio le liste.

Quindi in questo caso una lista è proprio un bullet point.

Quindi abbiamo da una parte una lista che può essere ordinata con una numerazione dall'inizio alla fine.

Quindi in questo caso me la sposto fuori, così la vediamo meglio.

La lista posso spostare o sotto oppure sopra.

In questo caso é quindi qua posso vedere tutti gli elementi di lista all'interno poter scrivere effettivamente delle un test dentro di Come vedete si crea una lista effettiva di quello che voglio scrivere al mio interno dall'altra parte o gli stai tem.

Quindi in questo caso posso mettere un l'istat all'interno di qualcos'altro.

Quindi aggiungo un elemento lista all'interno del mio.

Ovviamente l'istat possono essere inserite solo all'interno di altre liste, quindi è l'aggiunta di un elemento lista all'interno di un macro elemento chiamato liste.

Vediamo il link.

In questo caso il Wing lok è un blocco che ci aiuta a indicare un link verso una guerra esterna.

Quindi un re il che ci porta a un'altra parte.

Possiamo selezionare di aprire una nuova tab all'interno e anche di fare un prelievo ding un prefetto, ovvero che il browser è già si scarica un po' di quello che noi stiamo andando a definire il web e possiamo poi vederlo a livello visivo.

Qua ad esempio abbiamo la pagina, quindi quando io vengo inviato a una pagina qui io ne ho solamente costruita una.

Adesso vedo solamente questa.

Qualora avessi molteplici pagine le potrà vedere qua dentro.

Non puoi avere la possibilità di dire se voglio aprire una nuova tab oppure se voglio che rimanga tutta la stessa unica Tav prima o poi.

Le page section quindi all'interno il discorso delle pagine ancorate.

Quindi se noi definiamo una sezione nostra all'interno di questa casistica, poi il contenitore andrà dove abbiamo selezionato la page section.

Poi abbiamo l'e-mail dove possiamo avere le mail della persona che li riceverà questo link una volta che viene cliccato e il soggetto in nella mail che si auto comprerà all'interno della propria mail e infine il numero di telefono.

Questo chiaramente funziona solamente sui device che possono effettivamente fare delle chiamate telefoniche, quindi l'ultimo elemento principale è quello del bottone, quindi in questo caso il bottone perché si sta prendendo la griglia intera perché l'ho messo all'interno di questo contenitore e non ha una spaziatura.

Se adesso io invece ti do un quaranta pixel vedete che il bottone si va a riaggiustare.

Inoltre il bottone lavora con questi.

I padding interni esterni sono padding che noi troviamo nel box model all'interno della l'elenco di spa chasing che possiamo vedere qua e con le quali io posso annullare o è far crescere il padding interno che c' è a nostro componente.

Solitamente ci serve.

Ci è utile per definire i bottoni primari bottoni secondari e iniziare ad utilizzarli e poi chiamarli anche col proprio nome all'interno di quello che vedete qua.

Questo ci porta a concludere tutti gli elementi basici che possono essere utilizzati.

Grazie a questi elementi possiamo avere delle prime azioni oppure inserire all'interno diversi altri elementi che vedremo più avanti.

Ma quello che è l'elemento più utilizzato sono due principali qua il bloc, il link block é il button, il blog per avere all'interno altri elementi come immagini e video, testi, paragrafi altra tipologia ling per riuscire a collegare un link a qualche tipo di azione specifica come guerre pagina nuova, mandare una mail mandare a una pagina diversa oppure chiamare telefonare una persona oppure all'interno di una stessa pagina, essere indirizzati semplicemente a un'altra sezione della pagina stessa.

E infine abbiamo il button che è il l'elemento, anche questo più utilizzato insieme al link block, perché ci permette come il link effettivamente di avere la possibilità di mandare da qualche parte l'utente quando preme quel determinato link.

La stessa cosa possiamo farla col bottone.

La differenza principale e che block è un elemento che non ha nulla all'interno, mentre invece il button è una specie di lynx block, ma con all'interno già una serie di parametri che sono il colore dietro.

Il testo che vediamo è l'azione stessa che è anche presente il clock, quindi questi sono gli elementi principali che utilizzeremo e andrete sempre utilizzare solitamente all'interno delle dei siti internet creati con buffon è chiaro che sicuramente ci saranno delle casistiche dove potete utilizzare più grid o altre volte più columns, ma mediamente nei progetti che ho visto io vengono utilizzati section container di block glock, button