Flex o flexbox CSS, come spiegato nella precedente lezione consente di creare layout molto più semplici da gestire grazie alle proprietà che si possono assegnare.
Analizziamo in dettaglio queste proprietà.
Display flex
Questa proprietà dei CSS serve ad impostare il contenitore padre in maniera flessibile.
Quindi tutti gli elementi che sono figli di un contenitore che possiedono la seguente proprietà potranno assumere determinati comportamenti dettati dall’elemento padre.
Se impostiamo questa proprietà possiamo applicare anche le seguenti proprietà sotto elencate.
Flex direction
Questa proprietà, che chiaramente funziona se l’elemento è flessibile, serve a specificare la direzione dell’asse principale (main-axis) dove si dispongono i box flessibili nel contenitore.
I valori possibili che si possono assegnare sono: row, row-reverse, column, column-reverse.
Quindi in definitiva gli elementi interni possono essere disposti orizzontalmente per righe (row) dove dunque il main-axis è l’asse orizzontale (l’asse x) oppure verticalmente per colonne (column) dove dunque il main-axis è l’asse verticale (l’asse y).
L’ordine può essere quello predefinito da sinistra verso destra oppure inverso (row-reverse e column-reverse).
Tramite questa proprietà, si specifica se i box all’interno del contenitore padre devono essere disposti su un’unica riga oppure su più righe, nel caso in cui il main-axis sia l’asse orizzontale.
Mentre nel caso in il main-axis sia l’asse verticale, si specifica se i box all’interno del contenitore possono essere disposti su più colonne.
I valori possibili sono: nowrap, wrap, wrap-reverse.
Sia per gli elementi disposti orizzontalmente, sia per gli elementi disposti verticalmente, il valore di default è nowrap. Ovvero gli elementi prendono tutto lo spazio necessario senza andare in una nuova riga o colonna.
Se specifichiamo invece il valore wrap, se il main-axis è l’asse orizzontale quando si raggiunge la fine della riga, automaticamente gli elementi successivi si posizionano sulla riga successiva. Allo stesso modo, se invece il main-axis è quello verticale quando si raggiunge la fine della colonna, automaticamente gli elementi successivi si posizionano sulla colonna successiva.
Se si utilizza wrap-reverse la disposizione degli elementi avviene in ordine inverso.
Questa proprietàuna proprietà di sintassi abbreviata per esprimere assieme le due proprietà flex-direction e flex-wrap.
Justify content
Justify-content è la proprietà che serve a stabilire come allineare i box flessibili sull’asse principale del contenitore. I valori ammissibili sono: flex-start, flex-end, center, space-between, space-around e space-evenly. Con queste proprietà lo spazio libero di fine riga può essere ridistribuito.
.flex-container {
display: flex;
flex-direction:row; /* valore di default, si può omettere */
justify-content: center;
}
Align items
align-items: questa proprietà, degli elementi flexbox, serve a stabilire come allineare i box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center e baseline.
Se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
.flex-container {
display: flex;
flex-direction:row; /* valore di default, si può omettere */
justify-content: center;
align-items:stretch;
}
Align Content
Align-contentè una proprietà che serve solo per i contenitori multi-riga. Infatti serve a stabilire come allineare una riga di box flessibili sull’asse perpendicolare del contenitore. I valori ammissibili sono: stretch, flex-start, flex-end, center, baseline, space-between e space-around.
Anche qui se gli elementi interni dispongono del valore height, allora il valore di default è flex-start, altrimenti è stretch.
Conclusioni
Nelle prossime lezioni continueremo ancora a parlare di flex parlando in dettaglio di tutte le proprietà elencate ed inoltre introdurremo le proprietà che si applicano ai box flessibili.
In questa lezione realizzeremo un menù responsive utilizzando html5 e css3.
In particolare ad una risoluzione minore o uguale di 768 pixel si vedrà quello che spesso viene definitivo humburger menù, rappresentato da 3 barre orizzontali in un unico quadrato. Ad un risoluzione maggiore di 768 pixel invece si vedrà la navbar regolarmente.
Menù responsive esempio
In questo esempio quindi inseriamo nella pagina html il tag semantico header e creiamo un div header-top dove inseriamo due colonne, una che contiene il logo, l’altra che contiene il menù di navigazione.
Entrambe le colonne flotteranno a sinistra, dunque ho bisogno del clearfix per ripulire dal flusso il tutto.
Nella prima colonna inserisco solo il logo, mentre nella seconda colonna inserisco tutto il menù di navigazione.
Poi inseriamo le regole per formattare la navbar. Come primo passo togliamo i margini ed il padding a tutti gli elementi html.
Utilizziamo la max-width affinché la larghezza non sia mai maggiore di 1060 pixel e che si adatti ai dispositivi con una larghezza inferiore.
Creiamo la classe float left per assegnarla poi alle 2 colonne e la clearfix per assegnarla al contenitore padre. Coloriamo poi l’header, diamo anche un border-bottom ed un’altezza.
Diamo una larghezza alle due colonne in percentuale (cerchiamo di evitare i pixel).
Centriamo l’immagine in verticale utilizzando il vertical-align, e sistemiamo la navbar, togliendo gli elenchi puntati.
Dopo aver fatto questo, programmiamo le media queries necessarie per realizzare il menù responsive.
In particolare utilizzeremo l’after per mostrare l’icona bars di Fontawesome.
In questa lezione abbiamo visto come creare un menù responsive, nella prossima lezione vedremo come visualizzare il menù al click sull’icona dell’hamburger menù.
Se provate a passare sopra l’immagine, noterete che l’effetto opacity si toglierà.
Opacity su un’immagine – terzo esempio
In questo secondo esempio vogliamo creare un blocco colorato e quando passiamo sopra di esso con il mouse, si vuole far vedere l’immagine che sta sotto.
Quindi creiamo un blocco quadrato di 200 pixel a cui assegneremo una classe immagine.
Dopo impostiamo a questo elemento un’immagine di sfondo e la posizioniamo correttamente utilizzando le proprietà delle immagini.
Poi creiamo un elemento all’interno di questo e lo coloriamo in modo da coprirlo del tutto. Assegniamo a questo secondo elemento una classe opaco.
Ecco dunque l’effetto ottenuto. Per poterlo visualizzare passare sopra il quadrato blu.
Opacità su un elemento con del testo – quarto esempio
In questa sezione vedremo un esempio con un effetto opacity su un livello che contiene del testo.
Quindi nella pagina html inseriamo un semplice div con del testo riempitivo.
<div class="opaco">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe iusto ullam ea tempore beatae, aperiam maxime ducimus ab asperiores expedita ratione fugit molestiae veritatis inventore! Quo error ducimus delectus, totam.
</div>
Possiamo notare che il testo sarà reso opaco così come lo sfondo blu:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe iusto ullam ea tempore beatae, aperiam maxime ducimus ab asperiores expedita ratione fugit molestiae veritatis inventore! Quo error ducimus delectus, totam.
Per ovviare a questo inconveniente si può utilizzare l’opacità sfruttando l’rgba. Un esempio è stato presentato in questa lezione: opacità con rga.
In questa lezione abbiamo visto dei semplici esempi sull’uso della proprietà opacity dei CSS, nelle prossime lezioni vedremo altri esempi pratici.
In questa lezione parleremo dei CSS ed in particolare delle media query attraverso alcuni esempi pratici, utili per capirne bene il funzionamento.
Ricordiamo che la media query è una tecnica CSS che permette di creare siti web responsive.
Primo esempio – CSS media query
In questo primo esempio visualizziamo, nella versione desktop, un semplice box quadrato di colore blu. Dopo facciamo in modo che, quando la larghezza è uguale o inferiore a 568 pixel, appaia, nello stesso box contenitore, un’immagine di sfondo al posto del colore precedente.
Nel codice html inseriamo, quindi, solo un elemento a cui assegniamo la classe box, come di seguito:
<div class="box"></div>
Poi nel css assegniamo un’altezza ed una larghezza al box ed un colore di sfondo blu.
Dopo creiamo una regola media query per schermi con larghezza massima di 568 pixel, in modo da impostare un’immagine di sfondo.
Quindi nella versione desktop si vedrà questo rettangolo blu:
Nella versione mobile si vedrà invece un’immagine:
Secondo esempio – CSS media query
In questo secondo esempio costruiamo 4 box e li facciamo visualizzare, nella versione desktop, uno accanto all’altro. Quando poi scendiamo ad una larghezza pari o inferiore a 768 pixel i box si visualizzeranno due per riga.
Ecco dunque il codice html per la creazione dei box:
Nel CSS imposto, quindi, una dimensione del 100% diviso 4 per ciascun box ed un’altezza di 200pixel, un margine di 5 pixel su tutti i lati ed un colore di sfondo blu. Assegno anche il float left per far si che gli elementi si dispongano tutti su una riga.
Nella media query, per i dispositivi che hanno una larghezza massima di 768px, modifico poi solo la larghezza, lasciando invariato tutto il resto.
Di seguito il risultato visualizzato nel browser delle nostre icons CSS:
In definitiva le classi specificate all’interno del tag i, richiamano uno stile di icona incluso nel file all.min.css, a cui ci siamo collegati tramite cdn.
Possiamo anche dare uno stile alle icone, impostando ad esempio un colore di sfondo, una dimensione del testo, uno stile di carattere ed altre caratteristiche tipiche dei CSS.
Nel prossimo paragrafo vedremo dunque un esempio pratico.
Esempio formattazione icone CSS
In questo esempio di utilizzo delle icons CSS, formatteremo alcune icone a piacere dando un colore ed una dimensione del testo.
Nella pagina html inserisco le icone dell’esempio precedente ed aggiungo una classe che vado a definire poi nel foglio di stile.
Oggi parleremo di float e clear nei CSS e faremo degli esempi su come utilizzare assieme queste due proprietà.
Esempi d’uso float e clear
Facciamo un esempio in riferimento all’esempio con i float affrontato nella lezione precedente: float css.
Modifichiamo il codice html inserendo del testo, mentre nel codice CSS togliamo la larghezza e l’altezza del container.
Di seguito ecco la pagina html che contiene un contenitore con dentro uno span con del semplice testo e poi 3 box a cui assegniamo le proprietà float left e float right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Esempio con i float</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<span>ciao da coding creativo</span>
<div class="box red float-right">1 float-right</div>
<div class="box blue float-right">2 float-right</div>
<div class="box yellow float-left">3 float-left</div>
</div>
</body>
</html>
Dopo, nel foglio di stile, al container non diamo nessuna dimensione in larghezza o altezza, ma assegniamo semplicemente un colore.
Scriviamo poi le due proprietà per i float e creiamo le proprietà per i box contenitori.
Uno svantaggio nell’utilizzare la seguente proprietà è dato dal fatto che si può utilizzare qualora si ha controllo del margin e del padding altrimenti si rischierebbe di visualizzare le barre di scorrimento.
Uso di float e clear
La proprietà clear consente di impostare dei valori left, right, both, initial ed inherit.
Quindi possiamo cancellare il float su un lato oppure su entrambi i lati.
Proviamo dunque ad inserire un div direttamente nel codice html dopo tutti i contenuti.
<div class="container">
<span>ciao da coding creativo</span>
<div class="box red float-right">1 float-right</div>
<div class="box blue float-right">2 float-right</div>
<div class="box yellow float-left">3 float-left</div>
<div class="clearfix"></div>
</div>
E nel css aggiungiamo la seguente classe:
.clearfix {
clear: both;
}
In questo modo l’elemento non può avere elementi flottanti affiancati né a destra né a sinistra.
Clear e pseudo-elementi
Una buona abitudine, utilizzata per la maggior parte dei lavori web, è quella di non creare un div direttamente nella pagina html, ma utilizzare gli pseudo-elementi.
Nel nostro caso ci sarà utile lo pseudo-elemento ::after, al fine di creare, dopo il contenuto dell’elemento, una regola che abbia la proprietà clear, come nell’esempio precedente.
Dunque nella pagina html scriviamo semplicemente:
<div class="container">
<span>ciao da coding creativo</span>
<div class="box red float-right">1 float-right</div>
<div class="box blue float-right">2 float-right</div>
<div class="box yellow float-left">3 float-left</div>
</div>
Nei CSS la nostra regola potrebbe diventare:
.container::after {
clear: both;
}
Con after creiamo il contenuto, non dopo l’elemento container, ma dopo il contenuto di container.
Ma ciò non basta, dobbiamo dirgli di aggiungere del contenuto vuoto e di comportarsi ad esempio come una tabella.
perché i vecchi browser non supportavano il content vuoto.
In questa lezione abbiamo affrontato il problema del collasso dei margini di un contenitore che contiene degli elementi flottanti, quindi abbiamo utilizzando le proprietà float e clear.
