Come costruire un layout del sito web di notizie con Flexbox

Non è necessario capire ogni aspetto di Flexbox prima di poter entrare e iniziare. In questo tutorial, introdurremo alcune funzionalità di Flexbox mentre progettiamo un "layout di notizie" come quello che puoi trovare su The Guardian.

Il motivo per cui utilizziamo Flexbox è che fornisce funzionalità molto potenti:

• possiamo facilmente creare colonne reattive
• possiamo creare colonne di uguale altezza
• possiamo spingere il contenuto al parte inferiore di un contenitore

Quindi iniziamo!

1. Inizia con due colonne

Creare colonne in CSS è sempre stata una sfida. Per molto tempo, le uniche opzioni erano usare i float o le tabelle, ma entrambi avevano i loro problemi.

Flexbox semplifica il processo, dandoci:

• codice più pulito: abbiamo solo bisogno di un contenitore con display: flex
• non c'è bisogno chiaro galleggia, prevenendo il comportamento imprevisto del layout
• markup semantico
• flessibilità: possiamo ridimensionare, allungare, allineare le colonne in poche righe di CSS

Iniziamo facendo due colonne; uno che è 2/3 della larghezza del nostro contenitore, e uno che è 1/3.

 
 2/3 colonna 
 
 1/3 colonna 
 

Ci sono due elementi qui:

1. il colonne contenitore
2. Due colonna bambini, uno con una classe aggiuntiva di main-column che useremo per renderlo più ampio

.columns display: flex;  .column flex: 1;  .main-column flex: 2; 

Come la colonna principale ha un valore di flex di 2, occuperà il doppio dello spazio rispetto all'altra colonna.

Aggiungendo alcuni stili visivi aggiuntivi, ecco cosa otteniamo:

2. Rendi ogni colonna un contenitore Flexbox

Ciascuna di queste due colonne conterrà diversi articoli impilati verticalmente, quindi andremo a girare il colonna elementi anche nei contenitori Flexbox. Vogliamo:

• gli articoli da impilare verticalmente
• gli articoli a allungare e riempire lo spazio disponibile

.column display: flex; direzione della flessione: colonna; / * Rende gli articoli impilati verticalmente * / .article flex: 1; / * Allunga gli articoli per riempire lo spazio rimanente * /

Il direzione della flessione: colonna regola sul contenitore, combinato con il flex: 1 regola sul bambini assicura che gli articoli riempiano tutto lo spazio verticale, mantenendo le nostre prime due colonne alla stessa altezza.

3. Rendi ciascun articolo un contenitore Flexbox

Ora, per darci un controllo extra, trasformiamo anche ciascun articolo in un contenitore Flexbox. Ciascuno di essi conterrà:

• un titolo
• un paragrafo
• una barra informazioni con l'autore e il numero di commenti
• un'immagine reattiva opzionale

Stiamo usando Flexbox qui per "spingere" la barra delle informazioni verso il basso. Come promemoria, questo è il layout dell'articolo a cui miriamo:

Ecco il codice:

.articolo display: flex; direzione della flessione: colonna; flex-base: auto; / * imposta la dimensione dell'elemento iniziale in base al suo contenuto * / .article-body display: flex; flex: 1; direzione della flessione: colonna;  .article-content flex: 1; / * Questo farà riempire il contenuto dello spazio rimanente e quindi spingerà la barra delle informazioni in basso * /

Gli elementi dell'articolo sono disposti verticalmente grazie a direzione della flessione: colonna; regola.

Applichiamo flex: 1 al articolo-content elemento in modo che riempia lo spazio vuoto e "spinga" il informazioni sull'articolo verso il basso, indipendentemente dall'altezza delle colonne.

Dato che vogliamo che la prima colonna nidificata sia più ampia, stiamo aggiungendo a nested-colonna classe con lo stile aggiuntivo:

.nested-column flex: 2; 

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

.primo articolo flex-direction: row;  .primo articolo .article-body flex: 1;  .primo articolo .article-image height: 300px; ordine: 2; padding-top: 0; larghezza: 400 px; 

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

@media screen e (min-width: 1000px) .primo articolo flex-direction: row;  .primo articolo .article-body flex: 1;  .primo articolo .article-image height: 300px; ordine: 2; padding-top: 0; larghezza: 400 px;  .main-column flex: 3;  .nested-column flex: 2;