Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Come costruire un layout per siti di notizie con Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Annarita Tranfici (you can also view the original English article)

Final product image
What You'll Be Creating

Non è necessario comprendere ogni aspetto di Flexbox prima di lanciarsi e iniziare. In questo tutorial andremo a presentare alcune delle caratteristiche di Flexbox, progettando un "layout per siti di notizie" come quello presente sul portale del quotidiano inglese The Guardian. 

Utilizzeremo Flexbox in quanto presenta alcune peculiarità molto interessanti. Grazie a Flexbox infatti possiamo:

  • adattare facilmente le colonne in base al dispositivo
  • creare colonne che abbiano uguale altezza
  • spingere il contenuto nella parte inferiore di un box contenitore.

Ora che è tutto chiaro, iniziamo!

Cominciamo con Due Colonne

La creazione delle colonne in CSS ha sempre rappresentato una grande sfida. Per molto tempo, l'unico modo per riuscirci era utilizzare gli elementi flottanti o le tabelle, ma entrambi i metodi presentavano dei problemi. 

Flexbox rende il processo molto più semplice fornendoci:

  • un codice più pulito: abbiamo solo bisogno di un box contenitore a cui andremo ad applicare la regola display: flex
  • nessun bisogno di applicare la proprietà clear per ristabilire il flusso della pagina, evitando così che il layout subisca un cambiamento inatteso
  • markup semantico
  • flessibilità: possiamo ridimensionare, allungare, o allineare le colonne con poche righe di CSS

Iniziamo creando due colonne, una avente una larghezza corrispondente ai 2/3 della larghezza del nostro contenitore e una di 1/3.

In questa porzione di codice, ci sono due elementi a cui dobbiamo prestare attenzione:

  1. Il box contenitore, individuabile con la classe columns
  2. Due elementi figli (column), uno avente una classe addizionale, main-column, di cui disporremo per aumentare la sua larghezza. 

Dato che la colonna principale ha un valore flessibile (2), occuperà due volte lo spazio occupato dall'altra colonna.

Aggiungendo alcune classi, ecco il risultato che otteniamo:

Rendere Ogni Colonna un Contenitore Flexbox

Ognuna di queste due colonne conterrà diversi article impilati (allineati) verticalmente. A questo punto ciò che andremo a fare è trasformare anche gli elementi column in contenitori Flexbox. Quello che vogliamo è:

  • che gli article siano allineati verticalmente
  • Che gli article si allunghino e riempiano lo spazio disponibile

La regola flex-direction: column applicata al contenitore, combinata con la regola flex: 1 sugli elementi figli assicura che gli article riempiano tutto lo spazio verticale disponibile, mantenendo le nostre prime due colonne della stessa altezza.

Rendere Ogni Elemento Article un Contenitore Flexbox

Ora, per assumere ancora maggiore controllo, trasformiamo anche ogni elemento article in un contenitore Flexbox. Ogni article conterrà:

  • un titolo
  • un paragrafo
  • una barra delle informazioni contenente il nome dell'autore e il numero dei commenti
  • un'immagine adattabile opzionale

In questo caso utilizzeremo Flexbox per "spingere" la barra delle informazioni verso il basso. Come promemoria, questo è il layout dell'articolo che puntiamo a realizzare:

Ecco il codice:

Gli elementi dell'elemento article sono disposti verticalmente grazie alla regola flex-direction: column;

Applichiamo la regola flex:1 all'elemento article-content di modo che questo vada a riempire lo spazio vuoto e "spinga" article-info verso il basso, non importa quale sia l'altezza delle colonne.

Aggiungere Colonne Innestate

Nella colonna di sinistra, ciò che realmente vogliamo è un altro set di colonne. Quindi ciò che andremo a fare è sostituire il secondo article con lo stesso contenitore columns che abbiamo già utilizzato.

Dal momento che vogliamo che la prima colonna innestata abbia una larghezza maggiore, aggiungeremo una classe nested-column con uno stile aggiuntivo.

Questo renderà la nostra nuova colonna due volte più larga dell'altra.

Applicare al Primo Elemento Article un Layout Orizzontale

Il primo elemento article è davvero enorme. Per ottimizzare lo spazio utilizzato, cambiamone il layout rendendolo orizzontale.

La proprietà order appare molto utile qui, dal momento che dà la possibilità di modificare l'ordine degli elementi HTML senza toccare il markup. La classe article-image in realtà precede article-body nel markup, ma si comporterà come se fosse successiva.

Rendere il Layout Responsive

Tutto appare come desideriamo, sebbene un po' troppo compresso. Risolviamo il problema tentando un approccio responsive.

Flexbox permette che l'utente abbia solo bisogno di rimuovere la regola display: flex sull'elemento contenitore per disabilitarlo completamente, mantenendo valide tutte le altre proprietà (come align-items o flex).

Come risultato, potrete generare un layout "responsive" abilitando Flexbox soltanto oltre un certo breakpoint.

Andremo a rimuovere display:flex da entrambi i selettori .columns e .column, invece di includerli in una media query:

Ecco fatto! Sugli schermi più piccoli, tutti gli elementi article saranno impilati uno sull'altro. Oltre gli 800 pixel, saranno distribuiti su due colonne.

Aggiungiamo Qualche Tocco Finale

Per rendere il layout più accattivante sugli schermi di maggiori dimensioni, aggiungiamo qualche leggera modifica al codice CSS:

Il primo article vede disposto il proprio contenuto orizzontalmente, con il testo a sinistra e l'immagine a destra. Inoltre, la colonna principale è ora più larga (75%), come anche quella innestata (66%). Ecco il risultato finale!

Conclusione

Spero di avervi mostrato quanto non sia assolutamente necessario conoscere e comprendere ogni aspetto di Flexbox per iniziare a utilizzarlo! Questo layout per siti di notizie responsive è un modello davvero utile; smontatelo, giocateci e fateci sapere come procede! 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.