Possiamo notare che il livello 2 e 3 seguono un allineamento centrato sull’asse delle ordinate (asse y) mentre tutti gli altri seguono l’allineamento specificato nell’elemento padre tramite aling-items.
Nell’immagine sotto potete quindi vedere cosa produce il codice d’esempio spiegato sopra.
align-self:flex-start;
Cambiamo adesso la proprietà per il livello figlio in questo modo:
.al-self {
align-self:flex-start
}
Come si vede dall’immagine sotto, gli elementi box a cui è applicata questa classe sono allineati perpendicolarmente in alto.
Conclusioni
In questa lezione abbiamo visto come assegnare la proprietà align self ai box flessibili contenuti all’interno di un contenitore padre con al proprietà display: flex.
Nelle prossime lezioni faremo ancora altri esempi pratici utilizzando anche altre proprietà dei box flessibili al fine di consolidare questi argomenti.
La proprietà flex dei CSS consente di compattare le regole precedentemente studiate e cioè flex-grow, flex-shrink e flex-basis in un unico comando.
Flex CSS esempio
Spieghiamo dunque meglio questa proprietà con un semplice esempio.
In questo esempio abbiamo un container con display flex e abbiamo inserito una certo numero di di box al suo interno. Poi abbiamo assegnato a due di essi la proprietà flex.
In particolare ad un contenitore abbiamo assegnato il valore di default per le proprietà flex-grow e flex-shrink mentre abbiamo assegnato il valore di 300 pixel per la proprietà flex-basis.
Per il secondo box invece abbiamo assegnato a flex-grow il valore 1, a flex-shrink il valore 0 mentre a flex-basic il valore in percentuale del 25%.
Ecco dunque il codice CSS di esempio che utilizza la proprietà flex su due distinti elementi div:
Come si vede dall’immagine sotto, il secondo ed il terzo elemento seguono i valori assegnati alla proprietà flex, in particolare al secondo elemento viene applicata una larghezza di 300px, mentre il terzo subisce un ridimensionamento del 25%, così come specificato nel CSS.
Conclusioni
In questa lezione abbiamo affrontato un semplice esempio sulla proprietà flex dei CSS, adesso provate voi ad inserire più contenitori e ad assegnare a ciascuno di essi la proprietà flex personalizzata in base alle vostre esigenze.
Nella prossima lezione affronteremo ancora altre proprietà dei box flessibili e faremo altri esempi al fine di consolidare questi argomenti.
La proprietà flex basis consente di impostare le dimensioni in lunghezza di un box. Nel caso in cui è impostato flex-direction:row, oppure se non è specificato nulla, la lunghezza si riferisce alla larghezza (width), altrimenti se flex-direction:column allora la lunghezza si riferisce all’altezza (height).
flex basis valori possibili
Quindi si possono indicare, come valori possibili, i valori in percentuale, i valori numerici oppure la parola chiave auto. Il valore auto è quello di default e dunque divide in percentuale la larghezza tra i vari elementi sulla base della proprietà flex-grow.
flex basis esempio
Facciamo adesso degli esempi pratici per capire come funziona questa proprietà.
Creiamo quindi alcuni box contenitori e in alcuni impostiamo una dimensione in larghezza di 400 pixel e 100 pixel.
Di seguito ecco dunque il codice HTML e CSS di esempio:
Provando questo codice potete notare che flex-basis in questo caso si riferisce all’altezza e non più alla larghezza.
Conclusioni
Abbiamo affrontato un semplice esempio sulla proprietà flex basis, provate adesso voi stessi ad inserire più contenitori e a variare le lunghezze dei box contenitori
Nella prossima lezione affronteremo ancora delle proprietà dei box flessibili al fine di consolidare questi argomenti.
La proprietà flex shrink consente di impostare il fattore di riduzione, cioè rendere semplicemente più piccolo un box contenitore rispetto ad un altro o ad altri presenti nel contenitore padre.
Flex shrink valori possibili
Così come per la proprietà precedente flex grow, anche in questo caso si possono indicare dei valori numerici che determinano il fattore di riduzione di un box rispetto agli altri presenti nello stesso contenitore padre.
Se ad esempio un elemento ha la proprietà flex-shrink impostata a 2 allora verrà ridotto del doppio rispetto a quello il valore di flex-shrink impostato a 1.
Il valore di default in questo caso è 1.
Flex shrink esempi
Facciamo degli esempi pratici per capire come funziona questa proprietà.
Creiamo quindi alcuni box contenitori e in alcuni impostiamo un fattore di riduzione di 2 e di 3.
Di seguito ecco dunque il codice HTML e CSS di esempio:
Proviamo il seguente codice in un browser e otteniamo un risultato come da figura sotto:
Come potete notare dove abbiamo applicato il fattore di riduzione 2 e 3 i box contenitori sono più piccoli.
Conclusioni
Abbiamo studiato un semplice esempio sulla proprietà flex shrink, provate adesso voi stessi ad inserire più contenitori e a variare il fattore di riduzione in base alle vostre esigenze.
Nella prossima lezione affronteremo altre proprietà dei box flessibili al fine di consolidare questi argomenti.
La proprietà flex grow consente di impostare il fattore di ingrandimento , cioè rende semplicemente più grande un box contenitore rispetto ad un altro nel contenitore padre.
Flex grow valori possibili
Questa proprietà ammette un valore numerico che dunque determina l’ingrandimento del box che segue questa regola.
Se tutti gli elementi hanno ad esempio la proprietà flex-grow uguale a 1, lo spazio libero verrà suddiviso equamente fra tutti gli elementi (box).
Invece se un elemento ha la stessa proprietà impostata a 2 allora riceverà il doppio dello spazio rispetto agli altri elementi.
E così via per gli altri valori.
Il valore di default è 0.
Flex grow esempi
Facciamo degli esempi pratici per capire come funziona questa proprietà.
Creiamo tre box contenitori dove nel primo impostiamo la proprietà flex grow con il valore 1, nel secondo il valore 3 e nel terzo il valore 4.
Come possiamo notare questa proprietà si applica ai box flessibili contenuti nel contenitore padre.
Nell’immagine sotto potete notare come gli elementi hanno grandezza differente in base al valore specificato.
Conclusioni
Ho proposto un semplicissimo esempio della proprietà flex grow, provate anche voi adesso inserendo altri box contenitori e gestendo le grandezze in base alle vostre esigenze.
Nella prossima lezione vedremo una proprietà simile a questa che però consente di rimpicciolire i box contenitori.
