Nell’ambito dello sviluppo web, la creazione di layout flessibili e responsivi è essenziale per garantire un’esperienza utente ottimale su una vasta gamma di dispositivi e schermi. CSS Flexbox (Flexible Box Layout) è uno strumento potente che ci permette di costruire layout flessibili e complessi in modo più semplice e intuitivo rispetto ai tradizionali metodi di posizionamento.
Introduzione a CSS Flexbox
Flexbox è un modulo di layout CSS introdotto con CSS3, progettato per semplificare la strutturazione e l’allineamento degli elementi all’interno di un contenitore. Con Flexbox, è possibile creare layout complessi e flessibili senza la necessità di ricorrere a posizionamenti assoluti o float.
Gli elementi saranno disposti seguendo l’asse principale (Main Axis) o l’asse trasversale (Cross Axis).
L’asse principale di un contenitore flessibile è l’asse principale lungo il quale sono disposti gli elementi flessibili. Attenzione, non è necessariamente orizzontale; dipende dalla proprietà flex-direction.
L’asse perpendicolare all’asse principale è chiamato asse trasversale. La sua direzione dipende dalla direzione dell’asse principale.
Questa immagine dovrebbe rendere l’idea, in questo caso la flex-direction è row, quindi orizzontale, di conseguenza il Cross Axis è verticale:
Flexbox Axis
I principali concetti alla base di Flexbox sono i seguenti:
1. Contenitore Flex (Flex Container): Questo è l’elemento genitore che contiene gli elementi figlio flessibili.
Si applica la proprietà display: flex; o display: inline-flex; al contenitore per abilitare il modello di layout Flexbox.
2. Elementi Flessibili (Flex Items): Questi sono gli elementi figlio all’interno del contenitore flessibile. Essi si adattano automaticamente alle dimensioni del contenitore e possono essere allineati e distribuiti in modi vari attraverso le proprietà Flexbox.
Proprietà del Contenitore Flex
Le proprietà chiave da utilizzare sul contenitore flex sono:
1. display: Imposta il contenitore come flex o inline-flex.
2. flex-direction: Definisce la direzione dei flex items lungo l’asse principale. Valori possibili: row, row-reverse, column, column-reverse.
3. justify-content: Allinea i flex items lungo l’asse principale. Valori possibili: flex-start, flex-end, center, space-between, space-around, space-evenly.
4. align-items: Allinea i flex items lungo l’asse trasversale. Valori possibili: flex-start, flex-end, center, baseline, stretch.
5. align-content: Controlla la distribuzione dello spazio extra lungo l’asse trasversale se ci sono più righe di flex items. Valori simili a justify-content.
Ad esempio, utilizzando soltanto alcune proprietà del contenitore, possiamo ottenere questa sequenza di box allineati al centro:
Box allineati al centro con Flexbox
Modificando di poco il codice CSS, possiamo ottenere un perfetto esempio per il menu di navigazione di un sito web, in questo caso, ho solamente cambiato il testo dei box e cambiato il valore della proprietà justify-content da “center” a “space-around“, in modo tale che ogni bottone sia equidistante:
Esempio di menu di navigazione ottenuto con Flexbox
Un altro esempio di Menu orizzontale realizzato con Flexbox
Supponiamo di voler creare una semplice barra di navigazione orizzontale con tre elementi flessibili: uno all’inizio, uno al centro e uno alla fine.
<div class="navbar"> <a href="#">Home</a> <a href="#">Servizi</a> <a href="#">Contatti</a> </div>
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
}
.navbar a {
color: white;
font-size: 2em;
text-decoration: none;
background-color: #1d1e22;
padding: 0.5em;
}
.navbar a:hover {
background-color: grey;
color: #bbff51;
}
See the Pen
Flexbox Layout by Eugenio Corrao (@Eugenio-Corrao)
on CodePen.0
Nell’esempio sopra, abbiamo utilizzato la proprietà justify-content: space-around; per distribuire gli elementi ai margini del contenitore, creando così spazio vuoto tra di essi.
Avremmo potuto utilizzare space-between per renderlo più compatto ma questo dipende dal layout che vogliamo realizzare. La proprietà align-items: center; allinea verticalmente gli elementi al centro lungo l’asse trasversale.
Sempre rimanendo nell’ambito della creazione di un menu, potremmo modificarlo per avere un altro impatto visivo, supponendo di avere un logo a sinistra e il menu a destra della pagina, utilizzando
justify-content: flex-end; e aggiungendo il logo a sinistra:
Menu allineato a destra con Flexbox.
Il video che segue non vuole darvi l’eccellenza sulla conoscenza di Flexbox, io sono convinto che, per esperimenti, errori, video non perfetti, si possa raggiungere, quantomeno, la sicurezza di potercela fare, ognuno nel suo ambito. Al limite si cambia 🙂
Seguiranno altre puntate 🙂
Scarica i files
