Abbiamo parlato di Mexes e di cross axis e abbiamo detto che confligge xbox.

Non esiste il concetto di sopra, sotto destra e sinistra, quindi andiamo a capire un po' come fare gli allineamenti con flex box, quindi possiamo allineare gli elementi lungo il main axis.

Per fare questo dobbiamo utilizzare la proprietà giustifichi content assegnata sempre al contenitore, quindi non essendoci l'allineamento a destra o a sinistra per allineare gli elementi a sinistra.

Se la festa direction row.

Quindi, se gli elementi sono posizionati sulla stessa riga, dobbiamo dare la proprietà giustifichi content flex start, quindi letteralmente all'inizio del contenitore flex.

Se invece, sempre con la Direction ro vogliamo allineare gli elementi a destra, utilizziamo la proprietà giustifichi content flex end, quindi alla fine del contenitore.

Quindi dobbiamo tenere sempre in mente che la proprietà giustifichi content allinea gli elementi lungo il mein axis, quindi se la Flex Direction Riga row, il main axis è orizzontale, quindi il nostro giustifichi content lavora appunto lungo l'asse orizzontale.

Se invece la Flax Direction è Colum, succede che il mein Axis è verticale, quindi in questo caso la nostra proprietà giustifichi content non lavora piu' orizzontalmente, bensì verticalmente.

Quindi anche in questo caso dando l'allineamento giustifichi content flex start.

Gli item saranno allineati all'inizio quindi nella parte superiore del nostro contenitore.

Se invece con la Flex Direction Colum noi diamo la proprietà giustifichi content Black Sands, gli elementi saranno posizionati in basso, quindi alla fine del contenitore, sempre verticalmente.

Tutti i valori che si possono dare al giustifichi content sono diversi.

Quindi quelli più utilizzati sono Flack Start e Flack Sand, che sono quelli che abbiamo appena visto.

Si può utilizzare la parola chiave center per allineare gli elementi in modo centrato oppure space between space Around.

Qui vediamo una rappresentazione grafica di tutte queste proprietà basandoci sempre sulla Flax Direction Row.

Quindi se utilizziamo la Flex Start, gli elementi saranno a sinistra.

Black Sands a destra center chiaramente al centro, lo Space Between distribuisce lo spazio libero tra gli elementi e posizionando lì proprio ai lati degli elementi centrali e posizionando all'estremo sinistro e all'estremo destro, rispettivamente il primo e l'ultimo item, mentre la proprietà Space Around distribuisce lo spazio libero ai lati di ciascuna item.

Quindi anche il primo elemento avrà dello spazio a sinistra e l'ultimo elemento avrà dello spazio a destra.

Questo sempre se la Flex directioner o nel caso in cui la Flakka Direction fosse Colum.

Chiaramente sarebbe tutto ribaltato.

Riprendiamo l'esempio di prima.

Quindi abbiamo un contenitore Flex e tanti flex item All'interno.

Ora ne possiamo togliere qualcuno.

Ce ne basta? Ce ne bastano due.

Tre, giusto per fare un esempio.

Okay, salviamo aggiorniamo.

Quindi torniamo con la flat.

Sei Rex contro quella di default.

Aggiorniamo la pagina e voilà.

Quindi troviamo i nostri quadratini disposti sulla stessa riga.

Ora, se volessimo, ad esempio allineare gli elementi al centro orizzontalmente, daremo un giustifichi content center.

Aggiorniamo la pagina e troviamo tutti i quadratini.

Tutti i nostri flex item allineati al centro del contenitore.

Questi sono al centro orizzontali proprio perché la nostra dei Action Hero.

Se cambiamo la Direction e la impostiamo su Colum, aggiorniamo la pagina e troviamo gli elementi disposti al centro verticalmente.

Tornando sulla Flax Direction Row, possiamo dare la proprietà giustifichi Content Black Sand.

Aggiorniamo la pagina e notiamo che i nostri quadratini sono disposti a destra di nuovo.

Cambiando la Direction in Colum gli elementi si posizionano in basso rispetto al contenitore, tornando sempre sull'oro e vedendo Space Between, ad esempio, troviamo i contenitori distribuiti uniformemente per tutta la larghezza del contenitore e lo spazio bianco è inserito tra un elemento e l'altro utili va utilizzando invece Space Around.

I nostri quadratini si dispongono sempre uniformemente lungo la larghezza del contenitore, ma lo spazio vuoto viene distribuito ai lati di ciascun item.

Quindi troviamo dello spazio anche a sinistra del primo quadratino e a destra dell'ultimo.

Cambiando la Direction in Colum otteniamo lo stesso risultato, ma sempre verticalmente.

Quindi con lo Space Around abbiamo tutti gli elementi posizionati lungo l'asse verticale con un pochettino di spazio libero sopra e sotto, mentre con space between lo spazio libero rimane solamente tra un elemento e l'altro e i lati sono completamente adiacenti al al bordo del contenitore.

Vediamo ora come allineare gli elementi lungo il cross axis, quindi lungo l'asse perpendicolare.

Per fare questo dobbiamo utilizzare la proprietà line items sempre assegnata al contenitore Flex.

Quindi alla fine items lavora lungo il cross axis, quindi di nuovo dobbiamo ragionare in base alla direction.

Quindi se la direction ru quindi gli elementi sono distribuiti lungo la stessa riga, il cross axis sarà verticale, quindi possiamo decidere come allineare gli elementi verticalmente proprio utilizzando Alina Items, ad esempio Flack Start significa che gli elementi saranno posizionati in alto rispetto al contenitore, mentre dando agli night's black sand al contenitore, gli elementi saranno posizionati in basso ancora una volta se cambia la direction del nostro contenitore flex.

Quindi, se la flex Direction diventa Colum, il cross axis diventa l'asse orizzontale, quindi gli elementi potranno essere allineati in orizzontale all'interno del proprio contenitore.

Quindi li night's black start diventa il lato sinistro del contenitore, mentre li night's black Sands diventa il lato destro.

Anche il NYT EMS prevede diversi valori.

I principali più utilizzati sono appunto Flack Start Black Sand Center, che ovviamente l'allineamento centrato, stretch e baseline stretch significa che gli elementi vengono allungati per riempire l'intera dimensione del contenitore, mentre baseline significa che posiziona gli elementi lungo la stessa riga di partenza.

Questi concetti sono molto più chiari guardando degli esempi grafici.

Quindi ipotizzando sempre di avere la flex direction rosse e quindi al Limelight lavora in verticale.

Flex Start significa la parte superiore del contenitore center, chiaramente il centro verticale Black Sands la parte inferiore, quindi gli elementi sono posizionati in basso stretch allunga gli item, quindi aumenta l'altezza degli item per riempire tutto il contenitore Flex e infine baseline appunto, appoggia la prima riga di ciascun item sulla stessa riga virtuale.

Mettiamola così non c' è una reale riga visualizzata sullo schermo, ma si appoggiano tutti sulla stessa linea.

Riprendiamo l'esempio di prima.

Torniamo sulla flax direction ro leviamo giustifichi content e ora cominciamo a lavorare con la linea items.

Quindi allena items, flexi start.

Quindi se la mia direction ero significa che il mein axis orizzontale é il cross axis è verticale.

Quindi alla i night's black start significa che i miei item saranno allineati in alto.

Aggiorniamo una pagina e li troviamo proprio qui.

Se al posto di Flack Start utilizziamo i night's black sands, gli elementi vanno a finire in basso inserendo allo United Center.

Chiaramente gli elementi saranno allineati centralmente in modo verticale.

Alayne items stretch tracce cerca di allineare mi gli elementi in modo che riempiano l'lte zza del contenitore.

Ora questo non sta succedendo perché noi ai nostri item abbiamo assegnato un'altezza fissa.

Quindi chiaramente questa altezza sta vincolando all'altezza dei nostri a item se andassi per un momento a commentare l'altezza degli item, quindi dei nostri quadratini e aggiornarsi la pagina e voilà, ecco qui che vediamo i nostri item che ora prendono tutta l'altezza del contenitore flex.

Infine, utilizzando la proprietà baseline i nostri flex item, ora devo reinserire l'lte zza perché altrimenti questi spariscono si posizionano sulla stessa riga.

Questa avendo delle dimensioni fisse, non essendoci del reale contenuto, non è così semplice da vedere.

Quindi questo esempio non è del tutto calzante.

Chiaramente, avendo del contenuto inserito dei testi dei titoli delle immagini sarebbe più evidente.

Quindi normalmente gli item cercano di posizionarsi sulla stessa riga ora tornando su Flex Direction Colum e impostando il night's black start, quindi impostando la direzione su colonna, il main axis è verticale e il cross axis è orizzontale.

Quindi il nostro Lynn items in questo caso lavora in orizzontale.

Quindi Flack start significa a sinistra.

Black sand significa a destra al night center chiaramente allinea sempre gli elementi al centro, ma essendo la direzione colonna, questa volta il centro lungo il cross axis è in orizzontale é di nuovo stretch cerca di allungare i miei item.

Questa volta non dovro' togliere l'altezza ma dovro' togliere la larghezza come misura fissa proprio perché il nostro asse è ribaltato.

Quindi il nostro cross axis è in orizzontale, quindi la dimensione che questa proprietà cerca di stracciare.

Quindi allungare è proprio la larghezza