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.
La proprietà align content serve, come già detto, per allineare i contenitori multi-riga. In particolare ha la funzione di allineare i box flessibili sull’asse perpendicolare del contenitore.
A differenza di align items, questa proprietà, distribuisce lo spazio se gli elementi sono su più linee, non ha dunque effetto se gli elementi sono distribuiti tutti su una singola linea.
Questa proprietà, come le altre viste nelle precedenti lezioni, deve essere utilizzata assieme alla proprietà display:flex, che come già detto serve a rendere il contenitore padre flessibile.
align content valori ammissibili
I valori ammissibili per questa proprietà sono dunque flex-start, flex-end, stretch, center, baseline, space-between e space-around. Se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
align content esempi
Facciamo un primo esempio impostando il valore a flex-end, in modo da ottenere gli elementi contenitori (box) allineati in basso lungo l’asse y.
Visualizzando questo codice in un browser si vedono i box allineati in basso all’asse verticale, come da figura sotto:
aling-content:center;
Cambiamo adesso l’esempio di prima impostando la proprietà:
align-content:center;
Come potete notare dalla figura in basso otterremo un risultato di questo tipo, con gli elementi allineati al centro lungo l’asse perpendicolare.
I contenitori sono allineati al centro dell’asse perpendicolare (asse y).
aling-content:flex-start;
Adesso cambiamo la proprietà precedente impostando:
align-content:flex-start;
In questo caso, come si evince dall’immagine, gli elementi contenitori sono allineati in alto.
align-content:stretch;
Se invece impostiamo la proprietà:
align-content:stretch;
Gli elementi riempiono l’intero contenitore, come da immagine sotto.
Questo rappresenta il valore di default, nel caso in cui height sia specificato.
align-content:space-between;
Proviamo nuovamente a cambiare il valore della proprietà, impostando il seguente:
align-content:space-between;
In questo caso i box sono distanziati tra di loro:
align-content:space-around;
Infine proviamo anche la proprietà:
align-content:space-around;
Vedremo in questo caso che gli elementi sono allineati con dello spazio attorno.
In questa lezione abbiamo proposto dei semplici esempi con la proprietà align content, nelle prossime lezioni parleremo di altre proprietà e sicuramente riproremo dei semplici layout da realizzare utilizzando tutte queste interessanti proprietà.
La proprietà z-index nei CSS specifica la posizione di un elemento rispetto ad un altro.
Questa proprietà è molto utilizzata nello sviluppo dei vari layout, ad esempio quando occorre scrivere su di un’immagine oppure bisogna posizionare un elemento contenitore davanti o dietro ad un altro.
z-index CSS valori possibili:
valori numerici: valori positivi, negativi o il valore zero.
auto: è quello di default.
inherit: valore ereditato da un elemento padre.
z-index CSS primo esempio
Facciamo un semplice esempio inserendo un’immagine con il posizionamento assoluto e vogliamo poi visualizzare sopra di essa del testo qualunque.
Creiamo semplicemente una classe per l’immagine e impostiamo il valore di position ad absolute ed il valore di z-index a -1 per portarla indietro.
Impostiamo anche un’opacità sull’immagine per permettere una migliore lettura del testo.
Ecco dunque un semplice esempio d’utilizzo di z-index, nel quale, per semplicità, abbiamo incluso il css nella stessa pagina:
Se proviamo il codice su un browser visualizzeremo un layout di questo tipo:
z-index CSS secondo esempio
In questo secondo esempio creiamo due box e facciamo in modo che il secondo box stia davanti al primo.
Quindi creiamo uno stile per il primo box dando una larghezza, un’altezza, un colore di sfondo e un padding di 20 pixel. Per il secondo box, impostiamo il colore di sfondo, l’altezza, la larghezza e la position relative. Ricordiamo che questo permette di seguire le impostazioni di left, top, bottom e right. Impostiamo anche il valore di z-index a 1 per permettergli di stare sopra al primo livello.
Potevamo ottenere lo stesso risultato inserendo z-index a 0 in quanto non abbiamo impostato per il primo box nessun z-index.
Se avessimo inserito questi valori per il primo box:
position: relative;
z-index: 0;
Allora per portare aventi il secondo box, dovevamo inserire queste proprietà:
position: relative;
z-index: 1;
terzo esempio
Proviamo adesso a cambiare il valore di z-index del secondo box impostandolo a -1. Adesso il secondo livello è nascosto dal primo, come si vede nell’immagine sotto:
Fate la prova con tre livelli per capire meglio il funzionamento.
Nelle prossime lezioni torneremo ancora sulla proprietà z-index dei CSS con tanti altri esempi pratici.
La proprietà position CSS specifica il metodo utilizzato per il posizionamento di un elemento, come ad esempio un div, un titolo, ecc.
Si può dunque applicare a tutti gli elementi e non è ereditata.
Inoltre era una delle proprietà dei CSS più utilizzate per gestire il posizionamento degli elementi di una pagina web prima dell’avvento dei flexbox.
Position CSS valori possibili
I valori possibili che si possono indicare nella proprietà position sono:
static: è il valore di default della proprietà position CSS. Con questo valore gli elementi sono posizionati in maniera statica, cioè secondo il normale flusso della pagina html. Quindi per gli elementi che presentano questo valore le proprietà top, bottom, left e right non hanno alcun effetto.
relative: gli elementi in questo caso seguono la loro posizione normale ma anche le impostazioni di top, bottom, left, e right se specificate. L’elemento non esce dal normale flusso della pagina web.
fixed: gli elementi con questo valore vengono posizionati in modo che rimangano nello stesso posto anche se la finestra viene ridotta o allargata. In definitiva l’elemento viene rimosso dal normale flusso del documento in base alle proprietà specificate: top, bottom, left e right. Dunque anche quando scorriamo la pagina l’elemento rimarrà nello stesso posto.
absolute: questo valore, che può essere assegnato alla proprietà position CSS, consente di posizionare l’elemento non rispetto alla finestra del browser, ma all’elemento precedente più vicino. Anche in questo caso l’elemento viene rimosso dal flusso della pagina e segue le proprietà specificate: top, bottom, left e right.
sticky: questa proprietà è utilizzata per creare degli elementi che devono stare fissi nella pagina, come ad esempio il menù di navigazione. Infatti anche se l’utente scorre la pagina verso il basso si può decidere di far rimanere il menù fisso e disponibile in alto. Dunque viene posizionato in base alla posizione di scorrimento dell’utente. Pertanto si può dire che questo valore sta nella via di mezzo tra regular e fixed. Però occorre prestare attenzione a questo valore della proprietà position CSS, perché alcune versioni di Internet Explorer non lo supportano. Anche Safari richiede un prefisso -webkit. Bisogna dunque utilizzarlo ancora con parsimonia in quanto potrebbe anche non essere facilmente supportato da tutti i brower.
La proprietà overflow dei CSS controlla i contenuti che eccedono un’area e permettono di adattarli all’elemento contenitore.
Overflow CSS valori possibili
I valori possibili per overflow sono:
scroll – Impostando questo valore si aggiunge una barra di scorrimento. Se il contenuto non eccede l’elemento contenitore comunque si visualizza il box per le caselle di scorrimento.
auto– Aggiunge la barra solo se necessario.
visible – Valore di default. Il contenuto si visualizza all’esterno dell’elemento contenitore.
hidden– Il contenuto in eccesso viene tagliato.
Overflow CSS esempi
Facciamo alcuni esempi al fine di capire meglio il funzionamento di questa proprietà.
Il primo esempio che vi propongo utilizza la proprietà overflow: scroll che come abbiamo detto permette di scorrere il testo utilizzando le barre di scorrimento laterali.
Di seguito il codice completo d’esempio sull’utilizzo di overflow nei css:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Esempio proprietà overflow CSS</title>
<style>
.overflow-text {
width: 300px;
height: 100px;
margin-top:20px;
padding: 10px;
background: #eee;
border: 1px solid #ccc;
overflow: scroll;
}
</style>
</head>
<body>
<div class="overflow-text">
La proprietà overflow dei CSS controlla i contenuti che eccedono un'area e permettono di adattarsi all'elemento contenitore.
</div>
<div class="overflow-text">
La proprietà overflow dei CSS controlla i contenuti che eccedono un'area e permettono di adattarsi all'elemento contenitore. I valori possibili per overflow sono:
scroll – Impostando questo valore si aggiunge una barra di scorrimento anche se il contenuto non eccede l’elemento.
auto – Aggiunge la barra solo se necessario a differenza di scroll.
visible – Valore di default. Il contenuto si visualizza all’esterno dell’elemento contenitore.
hidden – Il contenuto in eccesso viene tagliato.
</div>
</body>
</html>
In questo esempio uno dei due elementi div ha tanto contenuto da eccedere l’elemento contenitore quindi compare la barra laterale per poter scorrere e leggere il testo.
In ogni caso nel primo compare l’elemento che predispone le barre di scorrimento verticale ed orizzontale.
Ecco come appare il layout con queste impostazioni:
Proviamo adesso a cambiare l’esempio precedente mettendo il valore auto.
overflow: auto;
Come si può notare dall’immagine, il primo box non ha l’elemento che predispone le barre di scorrimento verticale ed orizzontale, mentre il secondo box ha solo la barra di scorrimento verticale per poter leggere il testo.
Cambiamo nuovamente l’esempio precedente, sull’utilizzo della proprietà overflow nei CSS, inserendo questa volta il valore hidden:
overflow: hidden;
Come potete notare dall’immagine sotto, il testo del secondo box non è visibile, in quanto è stato impostato nascosto.
Proviamo poi il valore visible che è quello di default.
overflow: visible;
Si nota subito, dall’immagine sotto, che il testo esce fuori dall’elemento contenitore nel secondo box perché eccede le dimensioni.
overflow-x e overflow-y
Inoltre è possibile impostare le proprietà per modificare l’overflow solo orizzontalmente oppure solo verticalmente.
Queste proprietà sono:
overflow-x che consente di modificare il contenuto solo orizzontalmente.
overflow-y che consente di modificare il contenuto solo verticalmente.
In questa lezione abbiamo visto come utilizzare la proprietà overflow nei CSS e abbiamo fatto degli esempi al fine di capirne il funzionamento. Nella prossima lezione introdurremo altre proprietà.
Commenti recenti