Come costruire un layout per siti di notizie con Flexbox

() translation by (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.

<div class="columns">
  <div class="column main-column">
    2/3 column
  </div>
  <div class="column">
    1/3 column
  </div>
</div>

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

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

.columns {
  display: flex;
}

.column {
  flex: 1;
}

.main-column {
  flex: 2;
}

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

.column {
  display: flex;
  flex-direction: column; /* Makes the articles stacked vertically */
}

.article {
  flex: 1; /* Stretches the articles to fill up the remaining space */
}

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:

<a class="article first-article">
  <figure class="article-image">
    <img src="">
  </figure>
  <div class="article-body">
    <h2 class="article-title">
      <!-- title -->
    </h2>
    <p class="article-content">
      <!-- content -->
    </p>
    <footer class="article-info">
      <!-- information -->
    </footer>
  </div>
</a>

.article {
  display: flex;
  flex-direction: column;
}

.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.article-content {
  flex: 1; /* This will make the content fill up the remaining space, and thus push the information bar at the bottom */
}

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.

<div class="columns">
  <div class="column nested-column">
    <a class="article">
      <!-- Article content -->
    </a>
  </div>

  <div class="column">
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
  </div>
</div>

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

1	.nested-column {
2	flex: 2;
3	}

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.

.first-article {
  flex-direction: row;
}

.first-article .article-body {
  flex: 1;
}

.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

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:

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

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:

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

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!