Come utilizzare Flexbox per creare un moderno layout di progettazione di schede CSS

Grazie a Flexbox, una nuova modalità di layout in CSS3, possiamo ottenere tutte le nostre carte in fila, letteralmente. I design delle carte sono diventati popolari negli ultimi anni; come probabilmente avrai notato, i siti di social media hanno davvero abbracciato le carte. Pinterest e Dribbble utilizzano i layout delle carte per presentare informazioni e immagini. E se ti piace Material Design, le carte di Google sono ben descritte nella loro libreria di modelli.

Personalmente mi piacciono i layout delle carte per la loro leggibilità e per quanto siano scorrevoli. Presentano la perfetta "esplosione" di informazioni in un modo facile da sfogliare, scorrere e scansionare tutto in una volta.

Come creare un layout di carta

Se hai mai provato righe di contenuto pari, sai che crearle non è sempre stato facile. Probabilmente hai dovuto smanettare un po' per farlo funzionare in passato. Grazie a Flexbox, quei giorni sono praticamente dietro di te. A seconda del livello di supporto del browser che devi fornire, potresti dover includere alcuni fallback, ma il supporto del browser per questa funzione è abbastanza affidabile al giorno d'oggi. Per sicurezza, assicurati di controllare Flexbox sul fidato Posso usare. E ricorda, non dovresti mai apportare modifiche al tuo sito live. Prova invece a sperimentare con Local, un'app di sviluppo WordPress locale gratuita.

L'idea di base di Flexbox è che puoi impostare la proprietà di visualizzazione di un contenitore su flex , che "fletterà" le dimensioni di tutti i contenitori al suo interno. Colonne di uguale altezza e le opzioni di ridimensionamento e contrazione semplificheranno il modo in cui è possibile creare layout avanzati. Iniziare con le carte è come un cheat sheet di Flexbox, ma una volta che hai imparato le basi, puoi creare layout più complessi.

Flexbox e versatilità

Le carte sono versatili, visivamente accattivanti e facili da interagire su dispositivi grandi e piccoli, il che è perfetto per un design reattivo. Ciascuna scheda funge da contenitore di contenuti che può essere facilmente scalato verso l'alto o verso il basso. Man mano che le dimensioni dello schermo si riducono, il numero di carte nella riga in genere diminuisce e iniziano a impilarsi verticalmente. C'è ulteriore flessibilità in quanto possono essere un'altezza fissa o variabile.

Come creare il layout

Creeremo un layout di scheda Flexbox con una riga di quattro contenitori orizzontali su schermi più grandi, due su medi e una singola colonna per dispositivi piccoli.

Di seguito è riportato il frammento di codice per creare un layout di base per mostrare quattro carte. Non sto includendo il contenuto della carta interna (poiché diventa troppo lungo negli esempi di codice), quindi assicurati di inserire alcuni contenuti iniziali (e la quantità di contenuto varia tra le quattro carte). Inoltre, c'è una riga di quattro carte mostrate qui per iniziare, ma se ne possono aggiungere altre se si desidera vedere il comportamento con più righe di contenuto. Tutto il codice può essere trovato su Codepen.

Per visualizzare il nostro progetto di layout in uno schema a griglia, dovremo iniziare dall'esterno e procedere verso l'interno. È importante assicurarsi di fare riferimento al contenitore corretto, altrimenti le cose diventeranno un po' disordinate.

La sezione con una classe di .cards è quella che mireremo per prima. La proprietà display del contenitore è ciò che dobbiamo cambiare in flex .

Ecco l'HTML con cui vorrai iniziare:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Ecco il CSS per cominciare:

.cards {
   display: flex;
   justify-content: space-between;
}

Proprietà flessibile

Prima di entrare troppo in profondità, è bene conoscere le basi della proprietà flex. La proprietà flex specifica la lunghezza dell'elemento, rispetto al resto degli elementi flessibili all'interno dello stesso contenitore. La proprietà flex è una scorciatoia per le proprietà flex-grow , flex-shrink e flex-basis . Il valore predefinito è 0 1 auto; . Secondo me, il modo migliore per comprendere appieno Flexbox è giocare con i diversi valori e vedere cosa succede.

La proprietà flex-grow di un elemento flessibile specifica la quantità di spazio all'interno del contenitore flessibile che l'elemento dovrebbe occupare.

La proprietà flex-shrink specifica come l'elemento si ridurrà rispetto al resto degli elementi flessibili all'interno dello stesso contenitore.

La proprietà flex-basis specifica la dimensione principale iniziale di un elemento flessibile. Questa proprietà determina la dimensione della casella del contenuto, se non diversamente specificato utilizzando il ridimensionamento della casella. Auto è l'impostazione predefinita quando la larghezza è definita dal contenuto, che è simile a width: auto; . Occupa uno spazio definito dal suo stesso contenuto. Può esserci un valore specificato che rimane vero come si vede nella flex-basis: 15em; . Se il valore è 0, le cose sono abbastanza impostate perché l'elemento non si espanderà per riempire lo spazio libero.

Abbiamo iniziato con display: flex; e justify-content: space-between; ea questo punto le cose sono un po' imprevedibili. Flexbox è in uso, anche se al momento non è molto ovvio. Con questa dichiarazione, ciascuno degli elementi flessibili è stato posizionato uno accanto all'altro in una riga orizzontale.

Vedi questo su Codepen.

Probabilmente ti starai chiedendo perché ognuno di questi articoli flessibili ha una larghezza diversa. Flexbox sta cercando di capire quale sia la larghezza predefinita più piccola per ciascuno di questi elementi. E a causa delle varie lunghezze delle parole e di altri elementi di design, ti ritroverai con queste scatole di dimensioni diverse. Per ottenere un aspetto coerente, dovremo fare un po' più di lavoro. Impostare un involucro e determinare la larghezza desiderata aiuterà a trasformarli in carte uniformi.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Per impostazione predefinita, tutti gli elementi flessibili cercheranno di adattarsi a una riga. Aggiunta del flex-wrap: wrap; fa in modo che gli elementi si avvolgano uno sotto l'altro perché l'impostazione predefinita è a larghezza intera.

Vedi questo su Codepen.

L'intera larghezza è ottima per i dispositivi di piccole dimensioni, quindi tienilo a mente mentre pianifichiamo il nostro schermo più grande prima di affrontare vari punti di interruzione. Quando cambiamo la larghezza, le carte iniziano a sembrare più uniformi.

Dobbiamo aggiungere la classe .card ora per dare uno stile alle nostre singole carte. Questo può andare direttamente sotto gli stili .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Ricorda da prima, la proprietà flex è un'abbreviazione: flex-grow è 0, flex-shrink è 1 e la width è 24%. Aggiungendo una larghezza specificata, questo ci dà una riga di quattro con uno spazio in mezzo.

Vedi questo su Codepen.

Impostiamo la proprietà justify-content ai fini della spaziatura. Il primo elemento viene visualizzato all'estrema sinistra, il secondo e il terzo elemento vengono visualizzati al centro e il quarto elemento viene visualizzato all'estrema destra. Poiché la larghezza della scheda è del 24%, è rimasto dello spazio poiché le nostre quattro colonne al 24% non totalizzano il 100%. Abbiamo il 4% rimanente per essere esatti. Questo 4% è posizionato equamente tra ciascuno degli articoli. Quindi abbiamo circa l'1,33% di spazio tra le carte.

Vedi questo su Codepen.

Possiamo essere più precisi anche usando calc . La modifica del valore flex-basis per utilizzare calc sarebbe simile a questo:

.card {
	flex: 0 1 calc(25% - 1em);
}

La cosa interessante è che il browser prenderà il 25% dello spazio e rimuoverà 1em da esso, il che rende le carte leggermente più piccole.

È un modo intelligente per regolare lo spazio disponibile. L'1em è distribuito uniformemente tra gli elementi e si ottiene il layout perfetto.

Finora non abbiamo parlato molto di altezza. Ho aggiunto un'altra fila di carte per dimostrare come funziona l'altezza. Dipende da quale carta ha più contenuto: seguirà l'altezza delle altre. Pertanto, ogni riga di contenuto avrà la stessa altezza.

Questa è una vista molto "rimpicciolita", ma noterai che la prima riga è piuttosto alta perché la seconda carta ha più testo rispetto alle altre in quella riga. La seconda riga ha meno testo, quindi nel complesso è più breve.

Schede per dispositivi più piccoli

Attualmente abbiamo quattro colonne su tutte le schermate, il che non è proprio una best practice. Se rimpicciolisci la finestra del browser, vedrai che le quattro schede vengono semplicemente schiacciate su schermi più piccoli, il che non è l'ideale per la leggibilità. Fortunatamente con le query sui media, le cose inizieranno ad apparire molto meglio.

Per iniziare a risolvere il problema, i punti di interruzione specificati assicureranno che il contenuto venga visualizzato correttamente su tutti i diversi tipi di schermo.

Ecco i seguenti punti di interruzione che verranno utilizzati (sentiti libero di usare anche il tuo, i concetti sono ancora validi):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

È stato un grande pensiero fino ad ora. Entriamo nella mentalità mobile-first e iniziamo con la min-width: 40em breakpoint.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Con queste modifiche, le schede verranno visualizzate a schermo intero e si accumuleranno una sotto l'altra su qualsiasi schermo più piccolo di circa 640 px di larghezza. Se espandi la finestra del browser a qualcosa al di sopra, la colonna di quattro ritorna. Questo ha senso perché c'è una min-width minima di 40em ed è qui che abbiamo creato la fila di quattro carte.

Quello che manca qui è la via di mezzo. Per la fascia media, avere due carte di fila è più leggibile, piuttosto che le quattro carte schiacciate. Prima di capire la fila di due carte, è necessario aggiungere un'altra query multimediale per ospitare gli schermi più grandi, che avranno la fila di quattro carte.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

La nuova query media con una min-width minima di 60 em è dove verranno dichiarate le quattro carte. La min-width minima di 40 em è il punto in cui verrà dichiarata la fila di due carte. La magia sta accadendo con il valore flex calc del 50% – 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Con quel semplice cambiamento, ora le cose stanno funzionando! Riduci ed espandi la finestra del browser per assicurarti che tutto appaia corretto.

Vedi questo su Codepen.

Se le tue file di carte sembrano corrette, allora sei a posto! Se stai provando questo tutorial e hai un'ultima riga irregolare, continua a leggere.

Contenuto dinamico e spaziatura dell'ultima fila di carte

A seconda del numero di carte, potresti avere o meno un'ultima riga sciocca. Se c'è un'ultima riga completa o solo una carta in più, non ci saranno problemi. A volte avrai il tuo contenuto pianificato in anticipo, ma se il contenuto è dinamico, l'ultima riga di schede potrebbe non comportarsi come previsto. Se c'è più di una carta in più e il contenuto giustifica è impostato, lo spazio tra di loro sarà uniforme e potrebbe non essere allineato con le righe sopra.

Per ottenere questo aspetto, è necessario un modo di pensare diverso. Direi che non è così efficiente, ma è relativamente semplice.

Lo stile .cards e .card è stato eseguito al di fuori di una query multimediale:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Le media query sono dove viene determinato il numero di carte:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Dai un'occhiata a Codepen per vedere la soluzione modificata.

Si spera che questo ti dia una panoramica di base dei concetti di Flexbox che ti consentirà di iniziare. Flexbox ha un supporto browser piuttosto buono e i layout delle schede continueranno a essere utilizzati nei progetti di siti Web. E ricorda, i layout delle carte sono solo l'inizio di come puoi utilizzare Flexbox.

Successivo: Progetta più velocemente i siti WordPress

In questa guida, tratteremo suggerimenti su come lavorare più velocemente e velocizzare il flusso di lavoro di WordPress. Dalla configurazione iniziale del sito alla pubblicazione in diretta, scopri come puoi ridurre le ore di lavoro dal tuo lavoro quotidiano!

Scarica qui la guida gratuita!

Cos'altro hai costruito usando Flexbox? Condividi i tuoi progetti nei commenti!