Uno dei problemi più ostici per uno sviluppatore web alle prime armi è realizzare un front-end, una interfaccia, con oggetti, foto, contenitori allineati. Esistono diverse tecniche per ottenere il risultato voluto, ma nessuna è semplice ed efficace come il flexbox. Vediamo come usarlo.
Esistono diversi modi per allineare oggetti uno di fianco all’altro in una pagina HTML:
- Float
- Grid
- Flexbox
- Posizionamento assoluto
L’ultima delle tecniche elencate, nota anche con la dicitura inglese absolute positioning o semplicemente positioning è molto semplice: prevede un layout in cui gli oggetti sono disposti nello spazio/schermo in modo fisso. Design piuttosto semplice da realizzare ma non sempre efficace se si pensa al comportamento imprevedibile su dispositivi con schemi differenti in dimensioni ed usabilità, tra desktop, tablet e telefoni smart. Decisamente sconsigliata se non per realizzare provini in pochi click o se si conosce già l’utenza finale e i dispositivi a cui è diretto il layout.
Il float è forse una delle tecniche, per certi versi, storiche. E’ la prima basata sull’uso massiccio della proprietà CSS float con display. E’ molto didattica per comprendere come gli oggetti o meglio i contenitori div e semantici si relazionano tra di loro e si dispongono. E’ trattata in molte lezioni di questo sito e sezione dedicata a HTML/CSS. Si affida alla combinazione assegnata ad un contenitore float: left; display:block;, la proprietà clear e le varie varianti a disposizione. Semplice da usare se semplice è il risultato che si vuole utilizzare mentre al crescere della complessità e quantità di oggetti da disporre potrebbe risultare complessa da utilizzare e debuggare.
Le tecniche più utilizzate in giro per il web sono però flexbox e grid, che contano svariate librerie e framework css/javascript che consentono un uso semplice e versatile, vedi Bootstrap o 960.gs. Il sistema a griglia, grid appunto, rappresenta per certi versi una rivoluzione ideologica prima che tecnica, poiché non è mai stato semplice ed intuitivo suddividere una pagina web in sezioni chiare e precise, colonne ben delineate, se non usando tabelle o i vecchi frame, ormai in disuso. Il layout ottenuto con grid è indicato per realizzare in pochi istanti layout complessi con molte colonne o sezioni separate, semplicemente individuando gli id messi a disposizione della griglia che divide di fatto lo schermo in porzioni più o meno predefinite e adattabili. Il sistema a griglia rappresenta un sistema semplice per implementare in pochi istanti layout complessi ma è indicato solo se dobbiamo creare ed allineare molti oggetti, diventa al contrario dispersivo e pesante per piccole strutture. Un esempio di Bootstrap, con tre colonne small, col-sm il selettore css predefinito importato, che di default sono impostate a 540px.
<div class="container">
<div class="row">
<div class="col-sm"> Una di tre colonne </div>
<div class="col-sm"> Una di tre colonne </div>
<div class="col-sm">Una di tre colonne</div>
</div>
</div>Il vantaggio delle griglie è che, per quanto predefinite, sono infinitamente annidabili per raggiungere la disposizione precisa e desiderata. Flessibili quindi, ma un po’ dispersive.
L’ultima tecnica è quella del flexbox, che già in partenza, presenta numerose opzioni e sotto-opzioni per gestire al meglio il layout che si vuole. Guardiamo questo frammento di codice dove abbiamo innestato il css direttamente nel codice html per semplicità
<!doctype html>
<html lang="it">
<head>
<title>Test Flexbox CSS</title>
<meta charset="utf-8">
<style>
#contenitore{ display:flex; }
#box1, #box2, #box3 { height: 10rem; width: 10rem; border: 1px solid black; margin-left: 1rem; }
</style>
</head>
<body>
<div id="contenitore">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>Si tratta di un frammento semplice ma immediato da comprendere: tre quadrati dentro un contenitore che li allinea con una sola semplice direttiva, le altre sono solo grafica dei quadrati appunto. Dovrebbe venire un risultato simile a questo
Comportamento simile alla direttiva inline o inline-block ma che andava definita su tutti e tre gli oggetti. A questo css possiamo aggiungere svariate opzioni che rendono flessibile l’ordinamento
#contenitore {
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
}il default è intuitivamente row, da sinistra a destra rispettando il codice html. Se vogliamo giustificare gli oggetti del nostro contenitore abbiamo la proprietà justify-content:
#contenitore {
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}dove spuntano per interesse i vari left, center e right prima delle svariate combinazioni molto versatili, specialmente la center. Ecco un esempi odi come usarla applicata al nostro codice di prova:
<!doctype html>
<html lang="it">
<head>
<title>Test Flexbox CSS</title>
<meta charset="utf-8">
<style>
#contenitore
{
display:flex;
justify-content: center;
width: 100%;
}
#box1, #box2, #box3 { height: 10rem; width: 10rem; border: 1px solid black; margin-left: 1rem; }
</style>
</head>
<body>
<div id="contenitore">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
</body>
</html>che viene renderizzato in modo analogo al seguente:
Altra proprietà interessante è l’allineamento rispetto all’asse verticale in realtà molto simile a quello già visto
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;che possiamo subito usare in un nostro esempi centrando i quadrati rispetto al contenitore a cui abbiamo aggiunto un contorno:
<!doctype html>
<html lang="it">
<head>
<title>Test Flexbox CSS</title>
<meta charset="utf-8">
<style>
#contenitore
{
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height: 20rem;
border: 1px dotted black;
}
#box1, #box2, #box3 { height: 10rem; width: 10rem; border: 1px solid black; margin-left: 1rem; }
</style>
</head>
<body>
<div id="contenitore">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
</body>
</html>
Con questi esempi abbiamo già visto alcuni concetti chiave, forse tra i più ostici per uno studente alle prese con i suoi primi layout tra float e flex.
Le proprietà viste fino a questo momento sono definite sul contenitore più esterno, il padre per certi versi della struttura che abbiamo disegnato. Alcune proprietà utili possono essere definite anche per i figli come order, flex-grow, flex-shirnk e flex-basis. Vi rimandiamo ad una approfondimento personale o nei prossimi post di questo sito.
Ultima modifica 4 Giugno 2023