L’HTML5 ha introdotto un mucchio di nuovi tags, molti dei quali di carattere semantico. Tra questi rientrano anche gli elementi article e section, i quali potrebbero aver generato non poca confusione per via delle loro similitudini.
Nella prima parte dell’articolo avevamo discusso del Box Sizing, un’interessante proprietà che ci consente di includere padding e bordi alla dimensione di un elemento, risparmiandoci quindi “la fatica” di dover operare calcoli di sottrazione al fine di far apparire un elemento esattamente delle larghezza e altezza da noi specificate. Se hai trovato utile la novità del Box Sizing, probabilmente quella del Flexbox ti farà ancora più gola. Essa rappresenta infatti con tutta probabilità il futuro dell’impaginazione, il nuovo modo di strutturare i web layouts.
Nel corso del tempo questo compito è stato affidato a proprietà sempre più moderne, spesso non progettate allo scopo primario di definire un layout, basta pensare al floating oppure al posizionamento degli elementi.
Flexbox: quali vantaggi ci offre?
Adesso, grazie al Flexbox, abbiamo l’opportunità di gestire in modo semplice e immediato i box all’interno di un contenitore. Esso infatti ci fornisce una maniera più efficiente per organizzare, allineare e distribuire lo spazio tra gli elementi, anche nel caso in cui la loro dimensione sia sconosciuta o dinamica (da qui il termine flex).
L’idea principale dietro questa proprietà sta nel conferire al contenitore l’abilità di alterare i suoi elementi (altezza, larghezza e ordine) per riempire al meglio lo spazio disponibile. Appare quindi chiaro come il Responsive Web Design e il Flexbox vadano decisamente a braccetto (si pensi alla necessità odierna di adattare il layout a qualsiasi tipo di dispositivo e di risoluzione).
Dopo aver descritto in breve il ruolo del Flexbox, vediamo di entrare più nel dettaglio, per comprendere e sfruttare al meglio le sue potenzialità.
Iniziamo col dire in cosa consiste sonstanzialmente il Flexbox, che si compone di contenitori flessibili (flex containers) ed elementi flessibili (flex items).
Proseguiamo specificando che un contenitore flessibile viene dichiarato settando la proprietà display su flex o inline-flex.
Gli elementi flessibili sono disposti all’interno di un contenitore flessibile, lungo una linea flessibile.
Detto questo, non resta che andare ad analizzare le proprietà del contenitore flessibile, e quelle degli elementi flessibili posizionati al suo interno.
Flexbox: le proprietà del contenitore flessibile
flex-direction
Specifica la direzione degli elementi all’interno del contenitore.
- flex-direction: row; – è il valore di default. Gli elementi si dispongono da sinistra verso destra (a meno che non si setti la proprietà direction su rtl).
- flex-direction: row-reverse; – gli elementi si dispongono in modo inverso, da destra verso sinistra.
- flex-direction: column; – gli elementi si dispongono a colonna, dall’alto verso il basso.
- flex-direction: column-reverse; – gli elementi si dispongono in modo inverso, dal basso verso l’alto.
flex-wrap
Specifica se gli elementi debbano andare a capo o meno nel caso in cui non ci sia abbastanza spazio per loro su un’unica linea.
- flex-wrap: nowrap; – è il valore di default. Gli elementi non andranno a capo.
- flex-wrap: wrap; – gli elementi andranno a capo, se necessario.
- flex-wrap: wrap-reverse; – gli elementi andranno a capo, se necessario, ma nell’ordine inverso.
justify-content
Allinea orizzontalmente gli elementi quando questi non utilizzano tutto lo spazio a loro disposizione sull’asse principale.
N.B: l’asse principale non è necessariamente quello orizzontale, poichè esso dipende dal valore assegnato alla proprietà flex-direction.
- justify-content: flex-start; – gli elementi vengono posizionati all’inizio del contenitore.
- justify-content: flex-end; – gli elementi vengono posizionati alla fine del contenitore.
- justify-content: center; – gli elementi vengono posizionati al centro del contenitore.
- justify-content: space-between; – gli elementi vengono posizionati con dello spazio tra di loro.
- justify-content: space-around; – gli elementi vengono posizionati con dello spazio prima, tra, e dopo di loro.
align-items
Allinea verticalmente gli elementi quando questi non utilizzano tutto lo spazio a loro disposizione sull’asse perpendicolare.
- align-items: stretch; – gli elementi si “stirano” per riempire il contenitore.
- align-items: flex-start; – gli elementi vengono posizionati all’inizio del contenitore (in alto).
- align-items: flex-end; – gli elementi vengono posizionati alla fine del contenitore (in basso).
- align-items: center; – gli elementi vengono posizionati al centro del contenitore (verticalmente).
- align-items: baseline; – gli elementi si dispongono secondo il loro allineamento di riferimento.
align-content
È simile alla proprietà align-items, ma invece di allineare gli elementi flessibili, allinea le linee flessibili, quando c’è dello spazio extra sull’asse principale.
N.B: questa proprietà non ha effetto quando è presente un’unica linea di elementi flessibili.
- align-content: stretch; – è il valore di default. Le linee si “stirano” per riempire lo spazio disponibile.
- align-content: flex-start; – le linee vengono posizionate all’inizio del contenitore.
- align-content: flex-end; – le linee vengono posizionate alla fine del contenitore.
- align-content: center; – le linee vengono posizionate al centro del contenitore.
- align-content: space-between; – le linee vengono distribuite equamente. La prima si dispone all’inizio del contenitore, mentre l’ultima alla fine del contenitore.
- align-content: space-around; – le linee vengono distribuite equamente, con uguale spazio attorno ad ognuna di loro.
flex-flow
Si tratta di uno shorthand per le proprietà flex-direction e flex-wrap.
Flexbox: le proprietà degli elementi flessibili
order
Specifica l’ordine di un elemento relativamente al resto degli elementi presenti nello stesso contenitore.
flex-grow
Specifica di quanto un elemento dovrà ingrandirsi rispetto al resto degli elementi presenti nello stesso contenitore. Se assegniamo il valore 1 a tutti gli elementi, essi avranno uguale dimensione. Se assegniamo il valore 2 ad uno di loro, esso sarà grande il doppio rispetto agli altri. Il valore di default è 0.
flex-shrink
Specifica di quanto un elemento dovrà rimpicciolirsi, se necessario, rispetto al resto degli elementi presenti nello stesso contenitore. Il valore di default è 1.
flex-basis
Specifica la dimensione iniziale di un elemento, prima che lo spazio rimanente venga distribuito. Il valore di default è auto, dove la dimensione dell’elemento è uguale a quella dell’elemento stesso. Se per quest’ultimo non viene specificata una dimensione, essa dipenderà dal contenuto dell’elemento.
align-self
Consente all’elemento a cui viene applicata di annullare la proprietà align-items del contenitore. Esso si disporrà quindi indipendentemente dal valore che abbiamo impostato per quest’ultima. I valori di align-self sono gli stessi della proprietà align-items.
flex
Si tratta di uno shorthand per le proprietà flex-grow, flex-shrink e flex-basis.
Come puoi vedere c’è davvero tanta carne al fuoco, tante proprietà interessanti degne di essere esplorate a fondo per sfruttare al massimo le notevoli potenzialità del Flexbox.
Ti rallegrerà inoltre sapere che il Flexbox è supportato da tutti i maggiori browsers, quindi non abbiamo più scusanti per rimandare il suo studio.
Se dopo aver letto quest’articolo non hai ancora le idee del tutto chiare non ti preoccupare, visto che ho preparato per te una demo HTML/CSS dove potrai vedere le proprietà del Flexbox messe in pratica, e sperimentare a tuo piacimento qualsiasi soluzione. Buon divertimento!
Immaginiamo di rovistare per casa alla ricerca della nostra preziosa agenda, e di ritrovare per caso un foglietto vecchio di anni sui cui avevamo scritto un nostro appunto.. che aspetto potrebbe avere adesso? Bè, per scoprirlo possiamo tentare di ricrearlo tramite il nostro fidato programma di grafica. La guida di oggi ti mostrerà quindi come realizzare l’effetto vecchio foglio stropicciato, un risultato notevole in appena qualche passaggio. Pronto? Cominciamo!
L’HTML5 e il CSS3 ci hanno portato tante succulente novità, molte delle quali non vorremmo probabilmente più fare a meno. Ricordi la regola @font-face di cui ti ho parlato nell’articolo dedicato al Webfont Kit? Bè, questa è una di quelle! Se da un lato il primo ha introdotto nuovi tags per una struttura delle pagine web più pulita e ordinata, il supporto in modo nativo dei contenuti multimediali senza bisogno di plugins esterni e molto altro ancora, il CSS dal canto suo ci ha permesso nel corso del tempo un controllo sempre più esteso nella creazione dei web layouts. In quest’articolo, che suddividerò in due parti, tratteremo due delle novità più interessanti introdotte nel CSS3: il Box Sizing e il Flexbox.
Il Box Sizing
Quando impostiamo la larghezza e l’altezza di un elemento, questo potrebbe risultare più grande del previsto, come mai?
Semplice. Ciò accade perché padding e bordi di quell’elemento vengono aggiunti in automatico alla larghezza e altezza da noi specificate. Quindi…
Width = width + padding + bordi
Height = height + padding + bordi
Height = height + padding + bordi
Vediamo un esempio pratico.
See the Pen BowGva by Faby (@FabyLeon) on CodePen.
I div hanno le stesse dimensioni, ma il secondo risulta più grande a causa del padding che ho aggiunto.
Come posso far si che i due elementi abbiano lo stesso aspetto senza che io debba eliminare il padding nel secondo box? Qui entra in gioco la proprietà box sizing.
Il valore border-box
See the Pen epemBy by Faby (@FabyLeon) on CodePen.
Come potete vedere adesso i due div hanno esattamente la stessa dimensione, anche se ho lasciato il padding di 50 px nel secondo box. Magia? No, ho semplicemente applicato ad entrambi gli elementi la proprietà box-sizing: border-box;
Quest’ultima ci consente infatti di includere padding e bordi alla dimensione di un elemento, ovvero alla larghezza e altezza da noi specificate. Interessante vero?
Per un lungo periodo di tempo i programmatori web hanno dovuto impostare dei valori minori rispetto a quelli realmente voluti, poiché avevano bisogno di sottrarre padding e bordi. Ora questo problema è finalmente risolto, e chi non ritiene che la matematica sia particolarmente divertente potrà finalmente tirare un sospiro di sollievo.
Ho aggiunto la proprietà overflow: auto; nel secondo div solo per evitare che il testo debordasse dal box contenitore. Provate pure a rimuoverla per avere una visione più chiara dei due div. Provate anche a rimuovere la proprietà box-sizing: border-box; dal primo div, e vedrete come il box si ingrandirà leggermente. Questo dipende dal fatto che il bordo andrà a sommarsi automaticamente alla larghezza e altezza da noi specificate.
Nella seconda parte dell’articolo analizzeremo nel dettaglio l’altra novità degna di nota introdotta nel CSS3: il Flexbox. Non perdertela!
Al giorno d’oggi è possibile usufruire di svariati editors online che possono risparmiarci l’utilizzo di softwares a pagamento, come il noto Dreamweaver. Ho navigato a lungo per il web nel tentativo di trovarne uno in grado di soddisfare le mie esigenze, e alla fine ho fatto centro. Vediamo quindi insieme tre ottimi strumenti, e alla fine dell’articolo scoprirai qual è il miglior editor online per lavorare con i linguaggi HTML, CSS e JavaScript.
Quando abbiamo bisogno di qualche immagine per i nostri più svariati progetti, non ci basta che aprire Google, inserire delle parole chiavi e ritrovarci davanti un’infinità di materiale utile al nostro scopo. Questo può andar bene quando abbiamo intenzione di utilizzare le foto per uso personale, e nel caso in cui invece ne avessimo bisogno in ambito commerciale? A quel punto il discorso cambierebbe, perchè non tutte le immagini gratis prive di watermark e alla portata di tutti sono completamente free.
Ho un regalo per te!
Hey, ti va di scoprire il contenuto del tuo bonus di benvenuto? Ho preparato per te una serie di elementi grafici da utilizzare in qualsiasi progetto, anche commerciale. Che aspetti? Iscriviti alla newsletter, è gratis!
Guide HTML, CSS e JS
L'idea di creare dei templates mi ha da sempre affascinato, così mi sono data da fare per apprendere i linguaggi essenziali nella realizzazione dei web layouts: HTML, CSS e JS. Gran parte delle tre guide è il frutto della traduzione in italiano dei contenuti di w3schools, ma contengono anche il meglio trovato su internet. Se le guide ti sono risultate utili, o semplicemente desideri sostenere la crescita del sito, una libera donazione sarebbe cosa gradita.
