Abbiamo visto le proprietà di un contenitore Flex.

Ora andiamo nel dettaglio sulle proprietà che possiamo dare ai flex item La prima reflex.

Questa proprietà importa la dimensione base di un flex item e lo gestisce in modo dinamico.

Significa che è una un'impostazione, una dimensione che noi diamo di partenza prima che la light em venga inserito all'interno del contenitore flex.

Questa proprietà può assumere gli stessi valori accettati da White, quindi dei valori assoluti assegnati, ad esempio in pixel dei valori in percentuale rispetto al contenitore.

Oppure il valore auto che è il valore di default significa che si adatta in base al contenitore.

Quindi perché c' è bisogno di una proprietà Flex Benzies Se abbiamo già la with The Light, La differenza è che la flex Benzies non setta nello specifico la with all right, ma setta il mains significa che è legato al main Axis, quindi cambia in base alla Flex Direction.

Quindi se il nostro main Axis è orizzontale, quindi con la Flex Direction Row, la Flex Benzies lavora lungo la Main.

Sai che quindi la larghezza.

Se invece abbiamo la Flex Direction Colum e quindi il mein axis verticale, la proprietà Flex Benzies lavora proprio in verticale e quindi va a impostare l'lte zza dei nostri item.

Quindi è proprio qui che si differenzia rispetto alla white Light white sarà sempre e comunque la larghezza a prescindere da quale la festa direction, mentre la flex benzies di default con la flex direction ro sarà la larghezza.

Ma nel caso in cui la flakka Direction sia colum, la flex benzies lavora proprio sull'altezza dei nostri a item riprendiamo l'esempio dei nostri dei nostri a item Ora riportiamo le impostazioni di default, quindi flax direction ro e le impostazioni del nostro item.

Per distinguere meglio i nostri item diamo dei colori diversi quindi ad esempio pink creiamo delle classi green, possiamo tenere anche un blues é ad esempio gioiello, quindi dei colori base chiaramente alla classe pink.

Daremo background-color pike alla classe green daremo da che brown color green poi abbiamo la classe blu e quindi andiamo a togliere il background-color dal nostro item e lo inseriamo proprio nella classe blu.

Infine gli che avrà chiaramente background-color yellow, quindi abbiamo solo cambiato colore ai nostri quadratini in modo che li possiamo distinguere più facilmente.

Quindi sappiamo che il primo è quello rosa, il secondo è quello verde, il terzo è blu e il quarto è giallo.

Quindi se ora, anziché impostare la weed ai nostri item, volessimo dare ad esempio una flex benzies quindi al posto di wilt flex benzies chiaramente il risultato non cambia.

Quindi i nostri quadratini, pur aggiornando la pagina, rimangono dei quadratini è ora se modifico ad esempio tolgo l'lte zza andiamo a inserire del contenuto all'interno dei nostri item in modo da creare un contenuto.

Quindi che il divo abbia un'altezza naturale e non dobbiamo impostarla noi amano quindi inseriamo ad esempio dei numeri uno due, tre, quattro ora i nostri quadratini non sono più dei quadratini perché non hanno più un'altezza fissa.

Ma vediamo che di default questi questi item si allineano con la proprietà stretch, quindi di default prendono tutta l'altezza del flex container.

Vediamo quindi che i nostri item sono allineati con lina items tre che l'allineamento di default possiamo dare a linate ems center in modo che non occupino più tutta l'intera l'intero spazio l'intera altezza, ma prendano solo lo spazio necessario al contenuto.

Possiamo anche ingrandire il nostro contenuto in modo che sia leggibile più facilmente.

Quindi all'interno dei nostri a item possiamo cambiare, ad esempio il font-size emettere ad esempio venti pixel.

Possiamo cambiare il colore.

Possiamo metterlo bianco così da leggerlo meglio.

La white possiamo dare bold ed ecco il risultato.

Possiamo anche centrare il testo, ad esempio text-align center, in modo da avere il numerino al centro dei nostri quadri.

Il bianco sul giallo si legge poco, quindi magari al posto di hello possiamo anche usare orange, quindi cambiamo la classe per coerenza e cambiamo il colore.

Ok ora un pochettino più leggibile quindi è ora abbiamo la flex benzies cinquanta pixel che sta lavorando lungo la Flex Direction rock, quindi sta andando a impostare la larghezza dei nostri item cambiando la flex Direction in Colum.

Il nostro main axis diventa l'asse verticale, quindi la nostra flex Benzies non andrebbe piu' a impostare la larghezza, ma andrebbe a impostare l'lte zza.

Aggiorniamo la pagina e notiamo che in effetti ora i nostri a item vengono posizionati al centro in orizzontale perché abbiamo dato alla United Center e quindi ora la linea items lavora in orizzontale é il nostro flack spaces sta andando ad impostare l'lte zza dei nostri a item proprio perché la direction e colum e quindi l'asse principale è l'asse verticale e la mia ex è proprio all'altezza.

Vediamo ora un'altra proprietà utile per i nostri flex item è la proprietà flex grooves.

La proprietà flex crow imposta il fattore di crescita di un flex item e lo gestisce in modo dinamico.

Quindi anche in questo caso sarà sempre un'impostazione che noi diamo di partenza che flex calcolerà quando andrà a inserire tutti i contenuti nella pagina.

Quindi in base allo spazio disponibile, il valore di default di flex bro è impostato a zero, quindi se noi non specifichiamo nulla, la proprietà flex gro ha valore zero, quindi significa che una item non può crescere, quindi non puo' espandersi sempre in base alla direction.

Quindi se la direction nero significa che light em non si allarga, se invece noi diamo il fattore di crescita Flex crow uguale a uno significa che li tem può crescere, quindi si può allargare.

È possibile dare anche un valore maggiore di uno e questo farà si' che un item si allargherà sempre se la flex directioner o molto di più rispetto agli altri flex i temi che gli stanno a fianco.

Proprio perché se ad esempio diamo il valore Flex bro due significa che potrà ingrandirsi il doppio rispetto agli altri, ai temi che gli stanno a fianco impostiamo una xbox di cinquecento pixel.

Chiaramente questa è molto più grande rispetto al contenitore flex, quindi che cosa fa flex? Chiaramente non va a inserire gli item tutti quanti larghi cinquecento pixel perché non ci stanno nel contenitore, quindi flex cerca di farli stare in modo omogeneo all'interno quindi chiaramente questi item non occupano cinquecento pixel.

Possiamo anche andare a ispezionare e vedere quanti e possiamo vedere quanto grandi sono.

Quindi un item sarà centoventicinque pixel proprio perché il contenitore totale è di cinquecento, quindi ci sono quattro i team cinquecento diviso quattro fa centoventicinque, quindi il nostro flex cerca di distribuire il contenuto in modo uniforme.

Quindi quando dicevamo che la flex benzies è una misura di partenza è una misura ideale che però non è ancora la dimensione finale.

Questo è proprio un esempio calzante.

Ora capiamo meglio come funziona questo flax caro, riportiamo la nostra flex benzies su cinquanta pixel in modo che tutti i nostri a item stiano tranquillamente all'interno del contenitore.

Ora noi potremmo far si' che ad esempio il primo item si allarghi per riempire tutto lo spazio che rimane libero.

Quindi se ad esempio al mio item con la classe pink do un flash o due, significa che lui può crescere e può crescere il doppio rispetto agli ai tempi suoi fratelli.

Quindi se ora aggiorno la pagina, vediamo che light em una quindi quello rosa prende proprio tutto lo spazio disponibile e tutti gli altri a item rimangono piccoline al suo fianco.

Se ad esempio prendiamo anche la classe green e diamo a questo secondo item il flax gro uguale a tre, significa che può crescere ancora di più rispetto alla item una aggiorno la pagina e in effetti vediamo che anche il due si è allargato e si è allargato un pochettino di piu' rispetto all'uno.

Tutto rimane comunque sempre molto flessibile, quindi gli elementi si allargano e si stringono per riempire sempre lo spazio disponibile ora invertendo la direction.

Quindi impostando una flex direction colum i miei item si dispongono in verticale e ancora una volta vediamo che light em una elite i due si sono allargati allungati per riempire l'lte zza del contenitore e light due è leggermente più grande rispetto all'uno.

Lo possiamo anche rendere ancora più evidente impostando ad esempio un flex bro a cinque e vediamo che il due si è alzato ancora di più.

Un'altra proprietà simile al flex Brough è l'esatto opposto è la flex Shank è sempre una proprietà che noi diamo il flax item ed è il fattore di riduzione va ad indicare.

Se un flex item può restringersi può ridursi sempre lavorando lungo il main axis.

Quindi se la flat directioner o significa che puo' stringersi in orizzontale, quindi può diminuire la larghezza.

Se la Flax Direction è Colum puo', rimpicciolirsi in altezza.

Il valore di default in questo caso è una proprio perché di default flex cerca di far stare tutto il contenuto nel miglior modo possibile, distribuendo tutti gli elementi omogeneamente.

Quindi capita molto spesso che gli item debbano stringersi per non sborsare rispetto al contenitore.

Noi però possiamo impostare questo valore a zero se vogliamo che le dimensioni di base che noi diamo il nostro flax item rimangano tali.

Quindi, se non vogliamo che si stringa, anche in questo caso come Flex Crow, si può indicare un valore maggiore di uno per indicare che l'iter si può restringere molto di più rispetto agli altri.

Ai tempi suoi fratelli torniamo sul nostro esempio.

Torniamo con la flex direction row in modo che i nostri a item siano posizionati in orizzontale.

Ora, se impostata, sii una flex benzies più grande, quindi ad esempio duecentocinquanta pixel togliamo il grosso agli altri item e come abbiamo visto, i nostri i nostri item si posizionano lungo la larghezza del contenitore e cercano di riempirla al cento per cento proprio perché la flex benzies che noi abbiamo dato è molto grande ed è moltiplicata per quattro farebbe mille e il nostro contenitore invece è da cinquecento, quindi chiaramente questi si stanno stringendo per riuscire a stare tutti ben posizionati all'interno del contenitore.

Se noi però volessimo che uno specifico item non non si stringesse, quindi rimanesse nella sua dimensione di base, quindi questi duecentocinquanta pixel potremmo ad esempio prendere il terzo quadratino che è quello blu e impostare la proprietà flex shrink a zero.

Questo significa che noi non vogliamo che in questo caso il light blue, quindi il numero tre si stringa, aggiorniamo la pagina e in effetti ora vediamo che questo item è molto più largo rispetto agli altri perché lui sta mantenendo la sua dimensione di duecentocinquanta pixel la flax benzies, mentre gli altri a item occupano tutto lo spazio rimanente, quindi si prendono lo spazio che avanza diviso per tre.

Chiaramente abbiamo visto che possiamo allineare gli item dandole proprietà giustifichi content elaine items al container.

Se però volessimo allineare nello specifico un singolo item, possiamo andare a utilizzare la proprietà alain self per allineare un singolo flex item sempre all'interno del proprio contenitore.

Chiaramente quindi anche ad alain self possiamo dare le valori flack start black, sand center stretch e baseline, quindi funziona nello stesso modo.

La differenza sta che allyn a item la differenza sta nel fatto che alina items viene assegnato al flex container, mentre alain self viene assegnato al flex item.

Quindi alain self allinea se stesso mentre alina items in italiano significa allinea tutti gli elementi, quindi questo proprio ci fa capire la differenza.

Quindi, nonostante ci sia un certo allineamento generico per tutti gli elementi, possiamo spostare un singolo item proprio con questa proprietà alain self prendiamo ad esempio il nostro item numero quattro.

Ad esempio questo questo item viene posizionato tramite la proprietà alla nytimes center al centro in verticale.

Perché la nostra flat style action hero quindi sia lui io assegno la proprietà alain self ad esempio black sand otteniamo che il nostro riquadro numero quattro, quindi il nostro ri quadrino arancione, andrà a posizionarsi in basso rispetto al contenitore solo e solamente lui perché è l'unico elemento a cui abbiamo dato la laing self black sand.

Questo chiaramente possiamo darlo a tutti gli item, quindi se ad esempio al primo elemento vogliamo dare un flex start, questo specifico item andrà a posizionarsi all'inizio quindi nella parte superiore del contenitore giusto per completezza possiamo fare anche una light self stretch al nostro riquadri no verde e vedremo che lui si allunga.

Quindi tutte le proprietà a tutti i valori che abbiamo visto per la linea items le possiamo dare anche alla light self.

Per cambiare l'allineamento di uno specifico item vediamo l'ultima proprietà che possiamo dare ai flax item che è l' order lord è una proprietà particolare che ci permette di invertire o scambiare l'ordine dei flex item.

Quindi non rispettano più l'ordine con cui compaiono nella html, quindi l'ordine del codice, ma possiamo andare a spostare gli elementi con il css senza dover modificare html.

Questo è molto comodo, ad esempio quando vogliamo modificare l'aspetto della pagina su device differenti, quindi su larghezze differenti e vedremo come fare ora facciamo un esempio per capire come funziona Order.

Quindi nel nostro esempio, se ad esempio volessimo riportare light em numero tre all'inizio del nostro del nostro contenitore, quindi come se fosse il primo a questo contenitore blu, possiamo dare un order meno uno dando un valore negativo.

Significa che va a posizionarsi all'inizio di tutti i suoi fratelli di tutti gli item e quindi vediamo che si scambiano di posto e il nostro item numero tre va a posizionarsi proprio all'inizio di tutti quanti gli item la proprietà order puo' assumere tutti i valori tutti i numeri da uno all'infinito chiaramente quindi se abbiamo tantissimi elementi possiamo volerli mescolare tutti, ma di solito quello che si fa è appunto invertire di posto, quindi posso dare ad esempio al mio blu un order cinque che un numero piu' alto.

Questo significa che va alla fine.

Se però facendo sempre un esempio al mio arancione do un' Order dieci è un numero chiaramente maggiore rispetto al cinque e quindi di nuovo si scambiano di posto e il quattro va a finire in fondo giusto per giocare possiamo dare un order venti al nostro verde e il verde va a finire in fondo, quindi possiamo rimescolare le carte senza dover modificare il nostro codice html