Costruisci una pagina Web con CSS3 Flexbox

Ieri abbiamo discusso del futuro del layout CSS e di alcuni dei nuovi moduli che CSS3 porta in tavola in questa arena. Uno di questi che abbiamo brevemente toccato era CSS3 Flexbox.

Oggi approfondiremo questo modello e costruiremo una pagina web completa. Non sarà affatto pronto per implementare i tuoi progetti, ma ti fornirà ulteriori informazioni su un possibile modo in cui codificheremo i siti web negli anni a venire. Inoltre, questa roba è semplicemente divertente da giocare!

Altamente sperimentale: solo Webkit

Il mio obiettivo per questo post era di avere una pagina funzionante attiva e funzionante su diversi browser, ma non è successo. A questo punto l'implementazione è buggata e incoerente tra i browser, anche dopo aver installato Flexie.js, stavo ancora ottenendo risultati molto diversi tra Firefox e Safari (penso che abbia a che fare con il mixaggio di contenitori tipici centrati sul margine e Flexbox).

Per questo motivo, il progetto di oggi sarà rivolto principalmente a Safari e Chrome perché francamente, è ancora un casino in altri browser! Sicuramente ti incoraggio a seguire e poi a giocare con il prodotto finito per vedere se riesci a farlo funzionare in un'implementazione cross-browser. Se hai suggerimenti, mi piacerebbe sentirli nei commenti!

Passaggio 1: Classi riutilizzabili

Da quando ho brevemente spiegato il concetto base di Flexbox nel post di ieri, mi concentrerò sull'implementazione qui. Ma non preoccuparti, dovresti ottenere il succo mentre procediamo.

La prima cosa che vogliamo fare è creare alcune classi base che aiuteranno a definire il nostro layout. Questi attributi possono essere applicati a un ID in base alle necessità, ma trovo utile e ordinato farlo in questo modo.

.hasflex {display: box; mostra: -webkit-box; display: -moz-box; } .box0 {-webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; } .box1 {-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .box2 {-webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; } .box3 {-webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; } .last {margin-right: 0; }

Parliamo di come funzionano queste classi. La prima classe, hasflex, verrà applicato a un contenitore padre di cui vogliamo creare i figli utilizzando questo nuovo sistema Flexbox. Una cosa che noterete è che questo intero design sarà completamente privo di fluttuazioni, così da darvi alcune indicazioni su dove implementeremo Flexbox nel nostro codice.

Successivamente, impostiamo alcune altre classi per applicarle varie box-flex valori. Flexbox distribuirà comodamente i nostri elementi figlio attraverso il contenitore e questi definiranno le proporzioni. io credere che il valore predefinito è? 0? ma i risultati sono sembrati un po 'buggy con questa ipotesi, quindi ho trovato utile applicare sempre un valore manualmente.

Passaggio 2: HTML iniziale e CSS

Per iniziare il tuo documento HTML, crea un contenitore e un'intestazione. A questo punto, questi sono elementi base che costruiremo come sempre senza l'aiuto di Flexbox.

<h1>Demo di Design Shack Flexbox</h1>

Una volta che hai ottenuto questo, inserisci gli stili di base qui sotto. Fondamentalmente ho creato un corpo scuro con un contenitore leggero da 1.000 px che conserverà tutto il nostro contenuto. Toss in alcuni margini al centro e alcuni stili di testo di base e siamo pronti per passare alle cose divertenti.

Nota: Il carattere principale che userò è Oswald, di Google Fonts.

/ * Reset di base * / * {padding: 0; margine: 0; } / * Corpo / Container * / body {font-family: helvetica, arial, sans-serif; font-size: 15px; altezza della linea: 23px; sfondo: # 111; colore: # 222; } #container {width: 1000px; margine: 0 auto; sfondo: #eee; altezza minima: 1150 px; } / * Header * / #header {margin: 0 auto; larghezza: 900 px; padding-top: 20px; famiglia di font: 'Oswald', arial, serif; }

Passaggio 3: navigazione

Ora, per l'area di navigazione, si crea in genere un elenco di collegamenti e quindi li si sposta a sinistra. Con Flexbox, il processo è leggermente diverso. Qui applichiamo semplicemente il hasflex classe che abbiamo creato in precedenza e quindi utilizzare box0 per ciascuna delle voci dell'elenco. applicando box0 a tutti e tre ha l'effetto di far fluttuare i collegamenti a sinistra ma non li distribuirà lungo tutta la larghezza del contenitore.

<ul> <li>Casa</li> <li>Di</li> <li>Contatto</li> </ul>

Dopo questo, applichiamo semplicemente gli stessi tipi di stili che utilizzeremmo su qualsiasi altra pagina web. L'obiettivo principale qui è quello di distanziare leggermente i collegamenti con alcuni margini e assicurarsi che i nostri collegamenti siano disegnati correttamente.

/ * Navigazione * / #nav {larghezza: 900px; / * background: #eee; * / margin: 0 auto; } #nav ul {list-style: none; } #nav ul li {margin: 20px 20px 0 0px; } #nav a {text-decoration: none; colore: # 111; } #nav a: hover {text-decoration: underline; colore: # 666; }

Passaggio 4: l'immagine

Ogni buona pagina web ha bisogno di un'immagine. Per illustrare ulteriormente come applicare Flexbox in modo selettivo solo a quegli elementi che ne hanno bisogno, inseriremo un'immagine di intestazione di grandi dimensioni usando lo stesso codice esatto che fareste normalmente.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-web-page-with-css3-flexbox_4.jpg"> <p>Qui è dove Flexbox brilla davvero. Normalmente, la creazione di un layout a tre colonne come quello mostrato sopra comporterebbe una buona quantità di pianificazione matematica. Avremmo bisogno non solo di dividere il contenitore genitore in tre ma anche di calcolare le proporzioni corrette in modo che la colonna centrale sia più ampia delle altre due.</p> <p>Tuttavia, con Flexbox, tutto ciò che dobbiamo fare è applicare il nostro <em>FlexBox</em> classe in combinazione con le classi box numerate. Qui ho impostato il div medio in <em>box2</em> e gli altri a <em>box3</em>. Come puoi vedere nell'immagine sopra, l'effetto di questa è una distribuzione automatica delle colonne con la seconda più ampia della prima.</p> <p>È interessante notare che tutto ciò che ho letto mi ha portato a credere che il <em>box2</em> la classe sarebbe la più stretta in questo caso, ma questo semplicemente non era il caso nei miei test dal vivo! Questa configurazione determina un primo e ultimo paragrafo e un secondo paragrafo ampio.</p> <textarea wrap="soft" readonly=""> <h2>Uno</h2> <p>Lorem ipsum dolor sit amet? </p> <h2>Due lunghi</h2> <p>Lorem ipsum dolor sit amet? </p> <h2>Tre</h2> <p>Lorem ipsum dolor sit amet? </p>

Combina questo con alcuni CSS di base e hai un semplice e veloce layout a tre colonne! Poiché Flexbox si occupa automaticamente della distribuzione relativa alla larghezza genitore, qualsiasi modifica apportata al genitore si rifletterà automaticamente nei bambini.

/ * Colonne di testo: 3 larghe * / #colonne {larghezza: 900px; / * sfondo: grigio; * / margine: 10px auto; } #columns p {margin: 0 15px 0 0px; } #columns h2 {margin: 0 30px 0 0px; altezza della linea: 35px; famiglia di font: 'Oswald', arial, serif; }

Una cosa affascinante di Flexbox è che possiamo effettivamente riordinare le colonne che abbiamo configurato usando puro CSS. Assegnazione -webkit-box-ordinal-group: (un numero); per ogni elemento ti dà il controllo sull'ordine del loro aspetto.

Passaggio 6: pila verticale

È importante sapere che non è necessario utilizzare colonne verticali quando si lavora con Flexbox. Possiamo usare la stessa tecnica di cui sopra per impilare alcuni paragrafi uno sopra l'altro. Se entri davvero in Flexbox, questa tecnica può essere utilizzata per combinare elementi verticali e orizzontali in pila, ma la terremo qui di base solo per vedere come funziona.

<h2>Due lunghi</h2> <p>Lorem ipsum dolor sit amet? </p> <p>Lorem ipsum dolor sit amet? </p> <p>Lorem ipsum dolor sit amet? </p>

La differenza principale qui è che abbiamo impostato box-orient a verticale, che ci dà la pila verticale mostrata nell'immagine sopra invece delle colonne che abbiamo creato nel passaggio precedente.

/ * Righe di testo * / #rows {larghezza: 900px; / * background: gray; * / margin: 30px auto 15px; -webkit-box-orient: verticale; -moz-box-orient: verticale; box-orient: verticale; } #rows p {margin: 0 0px 15px 0px; } #rows h2 {line-height: 35px; famiglia di font: 'Oswald', arial, serif; }

Passaggio 7: due colonne

Solo per cambiare le cose un'ultima volta, creiamo un'altra sezione, questa volta con due colonne anziché tre. Il principio è esattamente lo stesso. Non devi ripensare il layout perché hai due colonne questa volta, Flexbox si occupa di tutto il sollevamento pesante ancora una volta.

<h2>Uno</h2> <p>Lorem ipsum dolor sit amet? </p> <h2>Due</h2> <p>Lorem ipsum dolor sit amet? </p> / * twoColums * / #twoColums {width: 900px; margine: 0px auto; } #twoColums p {margin: 0 20px 0 0; } #twoColums h2 {line-height: 35px; famiglia di font: 'Oswald', arial, serif; }

Prodotto finito

Guarda una demo dal vivo se sei in Safari o Chrome.

Andare avanti

Ho cercato intenzionalmente di mantenere questo esempio il più semplice possibile. Tuttavia, puoi facilmente prendere questo layout e renderlo ancora più complesso. Per i principianti, usare le percentuali per la larghezza ti darà un layout piacevole e veramente flessibile. Inoltre, come ho detto sopra, è possibile eseguire azioni complesse come la riorganizzazione delle colonne e la miscelazione di pile verticali e orizzontali nella stessa riga. Vi incoraggio a giocare il più possibile con il codice usando questa pagina come guida.

Conclusione

Questo esempio di base intende chiarire ulteriormente come utilizzare Flexbox per creare layout semplici e complessi in futuro. Sono abbastanza nuovo per il modulo, quindi questo è lontano da perfetto, come dimostra il fatto che non è ancora compatibile cross-browser!

Nonostante le sue carenze, dovresti avere una conoscenza approfondita di come funziona il modulo e cosa si può fare con una quantità relativamente piccola di codice quando si fa leva su Flexbox. Sentiti libero di dare un sacco di suggerimenti nei commenti!