La proprietà align items serve ad allineare i box flessibili sull’asse y se il contenitore ha impostato la proprietà flex-direction: row, altrimenti se ha impostato column allinea i box sull’asse x.
Anche questa proprietà, come le precedenti, deve essere utilizzata assieme alla proprietà display:flex, che come già spiegato serve a rendere il contenitore padre flessibile.
align items valori ammissibili
I valori ammissibili per questa proprietà sono: stretch, flex-start, flex-end, center e baseline.
Per poter vedere gli effetti di allineamento lungo l’asse y occorre utilizzare anche la proprietà height che stabilisce l’altezza di un elemento. Se gli elementi interni dispongono dunque del valore height, allora il valore di default è flex-start, altrimenti è stretch.
align items esempi
Analizziamo un primo esempio in cui impostiamo il valore center per la proprietà align-items.
Come potete notare ho impostato un’altezza di 200 pixel.
Questo è il risultato prodotto dal codice presentato nell’esempio sopra:
Adesso cambiamo impostazioni inserendo la seguente proprietà:
align-items: stretch;
Avremo un risultato come da figura sotto:
Ricordiamo che stretch è il valore di default se non viene specificata l’altezza del box, altrimenti è flex-start.
Adesso cambiamo nuovamente l’esempio impostando la proprietà align items con il seguente valore:
align-items: flex-end;
Si avrà un risultato come da figura sotto:
In questa lezione abbiamo semplicemente fatto dei semplici esempi per capire il funzionamento della proprietà align items. Questa proprietà permette l’allineamento degli elementi lungo l’asse y di un box contenitore.
Nella prossima lezione vedremo la proprietà align content, molto utile per i contenitori multi-riga, cioè per quei contenitori dove almeno ci sono due righe.
La proprietà justify content serve ad allineare i box flessibili sull’asse principale del contenitore, cioè l’asse x se la flex-direction è row, altrimenti l’asse delle y.
Dunque anche questa proprietà si utilizza assieme alla proprietà display:flex, che come spiegato nelle lezioni precedenti serve a rendere il contenitore genitore flessibile.
justify content valori ammissibili
I valori ammissibili per questa proprietà sono: flex-start, flex-end, center, space-between, space-around e space-evenly. Ognuno di questi valori produce allineamenti differenti dei box figli lungo l’asse principale.
Il valore di default è flex-start.
justify content esempi
Iniziamo facendo un semplice esempio di utilizzo di justify-content impostando il valore center che serve ad allineare gli elementi al centro.
L’esempio mostra il risultato, come da figura sotto:
Come potete notare dalla figura, gli elementi div sono centrati rispetto all’elemento padre.
Adesso cambiamo l’esempio precedente impostando la seguente proprietà:
justify-content: flex-end;
Gli elementi saranno allineati a destra nell’elemento contenitore padre, come da figura sotto.
In modo analogo, se utilizziamo la proprietà:
justify-content: flex-start;
Gli elementi saranno però allineati a sinistra, che è anche il valore di default, come da figura sotto:
Molto interessante è l’impostazione:
justify-content: space-between;
In quanto consente di uniformare lo spazio tra gli elementi all’interno del contenitore padre.
Ecco quindi come saranno disposti gli elementi:
Inoltre è possibile utilizzare l’impostazione:
justify-content: space-around;
che consente di avere uno spazio anche dai bordi di destra e sinistra rispetto al contenitore padre, come da immagine sotto.
Infine l’impostazione:
justify-content: space-evenly;
Produce un layout con uno spazio proporzionale tra gli elementi, come da figura sotto:
Abbiamo utilizzato la proprietà align-content con i diversi valori per disporre gli elementi sull’asse principale del contenitore padre. Nella prossima lezione vedremo come disporre gli elementi sull’asse perpendicolare utilizzando la proprietà align-items.
Quando si specifica wrap la disposizione degli elementi è dall’alto verso il basso. Inoltre se si raggiunge la fine della riga, automaticamente gli elementi successivi si posizionano sulla riga successiva.
Ecco quindi come sarà la disposizione degli elementi all’interno della pagina:
Chiaramente se utilizzo il valore di default:
.container {
width:800px;
margin-top:20px;
background-color: #ff00ff;
display: flex;
flex-wrap: nowrap; /* valore di default */
}
gli elementi sono disposti in questo modo:
che equivale a non mettere nulla.
Se si utilizza wrap-reverse la disposizione degli elementi avviene invece dal basso verso l’alto.
Ecco quindi come si visualizza l’esempio di prima se al posto di wrap inseriamo wrap-reverse:
Abbiamo sviluppato alcuni esempi utilizzando la proprietà. flex-wrap e i suoi possibili valori.
La proprietà flex direction consente di specificare la direzione dell’asse principale dove si dispongono i vari box flessibili nel contenitore genitore, consente cioè di disporre gli elementi orizzontalmente oppure verticalmente.
Abbiamo già elencato in linea generale questa proprietà in questa lezione introduttiva: introduzione alle flexbox css, adesso vedremo come utilizzarla attraverso vari esempi.
Valori possibili flex direction
Elenchiamo dunque in dettaglio i valori possibili che si possono specificare:
flex-direction: row;
Con questa proprietà si dispongono gli elementi orizzontalmente per righe e nello stesso ordine in cui sono indicati nel documento html.
flex-direction: row-reverse;
È simile alla precedente, in quanto gli elementi sono disposti orizzontalmente, ma l’ordine è inverso rispetto all’ordine in cui sono specificati nel documento html.
flex-direction: column;
Questa proprietà permette di disporre gli elementi verticalmente per colonne e nello stesso ordine in cui sono indicati nel documento html.
flex-direction: column-reverse;
Anche questa proprietà permette la disposizione degli elementi verticalmente per colonne ma nell’ordine inverso in cui sono indicati nel documento html.
Esempi flex direction
Facciamo adesso degli esempi pratici per vedere gli effetti di questa importante proprietà.
Inseriamo, come abbiamo visto negli altri esempi, il codice CSS all’interno della stessa pagina html, semplicemente per comodità.
Continuiamo a parlare dei flexbox nei css ed in particolare delle proprietà dei box-flessibili.
Nella precedente lezione abbiamo elencato alcune proprietà del box contenitore genitore, allego quindi il link: introduzione a flexbox, per permettere un facile ripasso.
Flexbox CSS proprietà dei box-flessibili
Le proprietà che si applicano ai box flessibili sono dunque:
flex-grow: proprietà che consente di impostare il fattore di ingrandimentodi un box rispetto agli altri. Ammette un valore numerico. Se tutti gli elementi hanno ad esempio flex-grow uguale a 1, lo spazio libero verrà suddiviso equamente fra tutti gli elementi. Se invece un elemento ha la proprietà flex-grow uguale a 2 allora riceverà il doppio dello spazio rispetto agli altri elementi.
flex-shrink: funziona allo stesso modo di flex-grow ma impostando il fattore di riduzione. Anche questa proprietà ammette dei valori numerici. In particolare se un elemento ha la proprietà flex-shrink impostata a 2 allora verrà ridotto il doppio rispetto a quello con flex-shrink uguale a 1.
flex-basis: permette di impostare le dimensioni di un box. Si possono indicare valori in percentuale, un valore numerico oppure la parola chiave auto. Il valore auto è quello di default e divide in percentuale lo spazio tra i vari elementi sulla base della proprietà flex-grow.
order: indica l’ordine in cui viene mostrato un box contenitore rispetto agli altri definiti nello stesso contenitore padre.
align-self: permette di specificare per un singolo box l’allineamento sull’asse perpendicolare. Consente di inserire i seguenti valori: flex-start, flex-end, center, baseline, auto e stretch.
In questa lezione abbiamo semplicemente elencato le proprietà dei box flessibili, nella prossima lezione approfondiremo ciascuna proprietà attraverso degli esempi pratici.
