Lasciatemelo dire prima: flexbox è facile. Sia che si tratti di problemi di adozione anticipata, sia perché abbiamo imparato a pensare in termini di float e blocchi, spesso dai web designer sento che pensano che Flexbox sia complesso da implementare. Ma ripeto: flexbox è facile.
C'è un trucco per capire la flexbox che ti insegnerò, dopodiché tutto sarà chiaro. Ma prima, voglio parlare di cos'è il flexbox.
Flexbox (o il Modulo di layout della scatola flessibile per dargli il nome corretto) è un insieme di proprietà CSS che si combinano per disporre i contenuti in modo reattivo.
Flexbox è la prima tecnica di layout CSS che funziona per il Web moderno. È giusto dire che fino al supporto di flexbox non esisteva una tecnica di layout che funzionasse bene con il responsive web design.
Un sacco di hack sono stati fluttuanti, come l'impostazione di elementi da visualizzare: blocco in linea e permettendo loro di avvolgere. Ma questo ha presentato una serie di problemi per i siti flessibili, non ultima la mancanza di controllo e l'effetto a catena del ridimensionamento degli elementi. Per questo motivo, molti siti Web reattivi utilizzano ancora JavaScript per posizionare il contenuto.
Flexbox è descritto dal W3C come inteso per la stesura di elementi dell'interfaccia utente, cose come le voci di menu, non è inteso per la stesura di pagine intere.
Il motivo per cui non è inteso per il layout di intere pagine, è che Flexbox ha un modulo CSS complementare, il Grid Layout Module che è inteso per il layout. Il layout della griglia è considerato la tecnica più appropriata per i layout di pagina intera. Purtroppo al momento il supporto per la rete è molto limitato e per "limitato" intendo "nessuno". Anche l'ultima versione di Chrome non riesce a supportarla senza bandiere.
Il supporto del browser per Flexbox è molto più completo. E poiché risolve così tanti problemi di layout moderni, flexbox è uno strumento ideale fino a quando non viene finalmente adottata la griglia.
Flexbox è ideale per lo styling di componenti su una pagina. La vera potenza di flexbox, e il motivo per cui funziona molto meglio rispetto ad altre opzioni di layout, deriva dalla dichiarazione di stili su gruppi di elementi anziché singoli elementi.
Quando si tratta di layout, raramente abbiamo bisogno di posizionare un singolo oggetto, se abbiamo intenzione di farlo, è molto meglio usare il posizionamento. Flexbox funziona meglio quando controlla il modo in cui i gruppi di elementi si correlano tra loro.
Disegna sempre una cosa considerandola nel suo prossimo contesto più ampio: una sedia in una stanza, una stanza in una casa, una casa in un ambiente, un ambiente in un piano di città. - Eliel Saarinen
In quanto tale, la specifica della flexbox è divisa in due parti, un insieme di proprietà che si riferiscono all'elemento contenitore e un insieme di proprietà che si riferiscono agli elementi all'interno.
Il supporto del browser è, in genere, una domanda complessa. È reso ancora più complesso per la flexbox perché la flexbox ha diverse sintassi. La precoce indecisione, lo sviluppo indipendente da parte di alcuni fornitori di browser e un processo iterativo ci hanno lasciato con diverse versioni di flexbox a cui tutti devono essere soddisfatti.
Fortunatamente, con l'aggiunta di alcuni prefissi del browser per i browser legacy, ora possiamo fare affidamento su di esso. Secondo caniuse.com , degli attuali browser mainstream solo IE9 presenterà un problema per noi.
Fortunatamente, come tutti i CSS, se la flexbox fallisce, fallisce silenziosamente. Significa che IE9 lo ignorerà.
Grazie alla sconcertante mancanza di collaborazione tra i vari rami di comitati e società, l'implementazione di Flexbox ha quasi eguagliato il caos dei primi anni '00, quando ogni singolo browser implementava ogni singola proprietà in modo univoco, e in modo errato, allo stesso tempo. Dando a tutti il beneficio del dubbio, le tre implementazioni di Flexbox erano semplicemente un approccio iterativo che ha portato alla soluzione comune più utile.
Esistono tre versioni della sintassi di Flexbox che è necessario tenere presente: vecchia, tra parentesi e nuova. Diversi browser supportano differenti sintassi, ad esempio IE10 supporta la sintassi tra parentesi.
Proprio come i prefissi del browser, scriviamo la sintassi di Flexbox dal più vecchio al più recente, in modo che la più recente sintassi supportata prevale sulle più vecchie sintassi.
Ad esempio, scriviamo display: flex in questo modo:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Nell'interesse della chiarezza, non intendo approfondire le sintassi più vecchie o discutere i meriti dei pre-processori, dei post-processori e dei diversi script di conversione. In tutti i miei esempi userò la sintassi corretta e nuova.
Quando si tratta di codice di produzione, utilizzo una serie di mixin di Sass per estendere il supporto di flexbox ai browser più vecchi.
C'è un eccellente Sass mixin qui , che puoi utilizzare per prevenire il gonfiore del codice o per estrarre la sintassi legacy.
Il segreto di Flexbox è che non è affatto una scatola. Fino ad ora, tutto il layout sul Web utilizzava un sistema cartesiano di xey per tracciare i punti. Flexbox, al contrario, è un vettore.
Sembra fantastico, vero? Flexbox è un vettore, nel senso che definiamo una lunghezza e definiamo un angolo. Possiamo cambiare l'angolo, senza influenzare la lunghezza; e possiamo modificare la lunghezza, senza influenzare l'angolo.
Questo nuovo approccio significa che una parte della terminologia di Flexbox è inizialmente complessa. Ad esempio, quando allineamo gli oggetti nella parte superiore di un contenitore flessibile, usiamo flex-start, non superiore, perché se cambiamo l'orientamento, flex-start verrà comunque applicato, ma non lo sarà.
Una volta compreso questo approccio, gran parte della flexbox è demistificata.
La sintassi di Flexbox è divisa in due gruppi: quelle proprietà che controllano il contenitore e quelle proprietà che controllano i discendenti diretti del contenitore. Il primo è il più utile, quindi iniziamo da lì.
Diciamo che vogliamo distanziare gli oggetti all'interno di un blocco. Li vogliamo distanziati uniformemente. L'uso di flexbox è davvero facile da fare. La prima cosa di cui abbiamo bisogno è un po 'di markup per provare questo:
Flexbox Layout È un semplice pagina HTML , con un div house , che contiene cinque div camera ognuna delle quali ha una classe che identifica la loro funzione, cucina, bagno, salotto e camera da letto.
Quello che faremo è impostare la casa come contenitore flessibile. Qualsiasi proprietà Flexbox che impostiamo in casa verrà quindi applicata ai suoi figli (la stanza s).
Per strutturare la stanza , dobbiamo prima dichiarare la casa come un contenitore flessibile e poi dirgli come vogliamo che gli elementi figli siano disposti.
Per dichiarare casa come un contenitore flexbox usiamo il seguente codice:
.house {background:#FF5651;display:flex;}E questo è tutto. Abbiamo creato una scatola flessibile. Tutto quello che dobbiamo fare ora è dire a Flexbox come impaginare le stanze . Possiamo farlo usando la proprietà justify-content .
justify-content ha cinque possibili valori: center, flex-start, flex-end, space-around e space-between. Questi centrano gli oggetti, li allineano all'inizio (che è in alto oa sinistra, come vedremo in seguito), la fine (che è in basso o a destra), li spazia con lo stesso spazio attorno a ciascun oggetto, o con spazio uguale tra ogni oggetto, rispettivamente.
Useremo lo spazio intorno:
.house {background:#FF5651;display:flex;justify-content: space-around;}Ecco una demo . Nota come c'è il doppio dello spazio tra gli oggetti così come c'è sui due bordi esterni? Questo perché ogni oggetto ha lo stesso spazio a sinistra e a destra. Se avessimo usato lo spazio, tra uno spazio e l'altro non ci sarebbe stato spazio.
Non sono sicuro di te, ma il bagno in casa mia è un po 'più piccolo del salone, e anche se ho una piccola cucina, mi piacerebbe molto più grande. Facciamo alcune aggiunte al nostro codice per riflettere questo:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Come puoi vedere in questo esempio , le nostre stanze sono ancora uniformemente distanziate. Anche se abbiamo cambiato le dimensioni. Flexbox è geniale nell'organizzare i contenuti.
Come abbiamo discusso sopra, uno dei motivi per cui flexbox funziona così bene per i progettisti è che è descritto come un vettore. Attualmente, la flexbox supporta solo quattro angoli: 0, 90, 180 e 270 gradi. Quindi è molto più semplice considerarli come un asse.
Per cambiare l'asse, utilizziamo la proprietà flex-direction , che ha quattro valori possibili: row (il default - come puoi vedere negli esempi sopra, le nostre stanze sono disposte da sinistra a destra), row-reverse, column e colonna-inverso.
Se cambiamo la direzione della flessione in colonna, vedrai in questa demo che le stanze ora sono disposte verticalmente, dall'alto in basso:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Siccome sono sicuro che puoi indovinare, invertire la riga e invertire la colonna, inverti l'ordine degli articoli nel tuo contenitore flessibile.
Nell'ultimo esempio noterai che mentre la casa si estende completamente attraverso il viewport, si estende fino all'altezza totale, anche quando è impostata su flex-direction: column.
Per giocare piacevolmente con il sistema di coordinate basato su cartesiano del CSS, il contenitore flexbox viene trattato come un elemento a livello di blocco.
Proprio come display: block ha un display companion : inline-block, così da visualizzare: flex ha display: inline-flex.
inline-flex è attualmente più utile se stai trascinando elementi flexbox in un layout esistente e ne hai bisogno per giocare con i float e gli elementi posizionati.
Come abbiamo visto, flexbox non si preoccupa se è disposto orizzontalmente o verticalmente, a prescindere dalla direzione prescelta che è considerata l'asse principale di Flexbox.
Ma la flexbox ci consente anche di controllare la posizione lungo l'asse opposto, secondario.
La posizione sull'asse secondario è controllata dalla proprietà align-items ; ha cinque possibili valori: linea di base, centro, flex-end, flex-start e stretch.
la linea di base sarà normalmente l'opzione più utile. Assicura che le linee di base del testo si allineino. Per testare questo, abbiamo bisogno di apportare alcune modifiche al nostro file HTML:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomVedrai che ho aggiunto del testo e importato, quindi ho applicato un carattere Google. Ho anche cambiato la dimensione del carattere in cucina e in bagno, quindi c'è una chiara distinzione.
Quando imposteremo la proprietà align-items sulla baseline vedrai in questa demo che la linea di base del testo corrisponde.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}allineare: allineare il centro centrale, sia verticalmente (se direzione della flessione: riga, o direzione della flessione: fila-indietro ) o orizzontalmente (se direzione della flessione: colonna, o direzione della flessione: colonna inversa ). Ecco una demo.
elementi allineati: allineamento flex-start in alto e allineamento: allineamento flex-end al fondo (in caso di direzione della flessione: riga o direzione della flessione: riga-rovescio ) o verso sinistra e destra (se direzione della flessione: colonna o direzione della flessione: colonna inversa ). Ecco una demo.
allungare, è un'altra opzione molto utile. stretch ridimensionerà gli oggetti, in modo che ognuno abbia la stessa altezza (cresceranno, non si restringeranno). Ecco una demo.
Nei nostri altri esempi, abbiamo impostato in modo esplicito l'altezza degli elementi, che è sufficiente per ignorare la flexbox, quindi per vedere gli elementi di allineamento: allungare correttamente il lavoro è necessario rimuovere l' altezza da tutte le classi tranne una.
Finora abbiamo utilizzato gli elementi del layout flexbox in modo che si ridimensionino nello spazio, ma cosa succede quando il contenuto degli elementi è troppo grande per adattarsi a una sola riga?
Per dimostrarlo, aumenterò le dimensioni delle mie stanze:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomEcco come appare ora
Se riduci la finestra del browser, vedrai che il contenuto viene troncato, poiché non c'è spazio per esso. Fortunatamente flexbox definisce una proprietà flex-wrap proprio per questa eventualità, che ha tre possibili valori: no-wrap (predefinito), wrap e wrap-reverse.
il wrap fa sì che tutti gli elementi che si estendono oltre il contenitore si avvolgano su una riga successiva, proprio come una riga di testo si avvolge.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Se schiacci il browser, vedrai in questa demo gli oggetti ora si avvolgono su nuove linee. Si noti come gli elementi di allineamento: la proprietà della linea di base è ancora applicata? Il vero potere di Flexbox sta nel combinare le sue proprietà.
Un concetto importante, che tratterò più avanti, è il flex-wrap: il wrap-reverse non inverte l'ordine degli elementi, ma fa sì che qualsiasi oggetto che si estende oltre il contenitore si avvolga su una linea precedente, come si vede in questa demo .
Come molte proprietà CSS, alcune proprietà di Flexbox hanno versioni abbreviate che vengono implementate in modo più coerente dai produttori di browser.
La proprietà di flessione del flusso è una scorciatoia per le proprietà di flessione e flex-wrap . Quindi, invece di scrivere:
flex-direction:row-reverse;flex-wrap:wrap;Possiamo usare la stenografia:
flex-flow:row-reverse wrap;In alto, abbiamo utilizzato la proprietà align-items per allineare gli elementi alla linea di base, alla posizione e agli elementi stretch. Come puoi vedere nell'ultimo esempio, è ancora in corso, ma si verifica riga per riga.
Quando i nostri articoli sono stati confezionati, abbiamo la possibilità di impostare il modo in cui verranno disposti sull'asse secondario se il contenitore è più grande del necessario.
Se impostiamo l' altezza minima della nostra casa a 1200px, il nostro layout Somiglia a questo .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}Ora possiamo utilizzare la proprietà align-content per disporre gli articoli sull'asse secondario completo.
La proprietà align-content ha sei impostazioni: center, flex-end, flex-start, space-around, space-between e stretch. Questi valori forniscono gli stessi risultati di qualsiasi altra posizione: centratura, allineamento a un'estremità, spaziatura uniforme o allungamento.
Ecco una demo con la proprietà impostata sullo spazio intorno.
Fino ad ora, tutte le proprietà che abbiamo esaminato sono state impostate sull'elemento contenitore. Al fine di mettere a punto gli elementi, flexbox ci fornisce anche una serie di proprietà che possono essere impostate su singoli elementi.
Per chiarire questo, rimuoviamo parte del nostro codice:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomEcco come appare.
La prima proprietà dell'oggetto flexbox è la proprietà flex denominata in modo confuso. flex è un valore della proprietà display sul contenitore, ma è anche una proprietà a sé stante.
La proprietà flex è una scorciatoia per le proprietà flex-grow, flex-shrink e flex-base . Il ruolo di queste proprietà è quello di allungare o schiacciare le dimensioni del contenuto in modo che riempia interamente lo spazio.
La proprietà flex-grow indica agli elementi che possono essere ingranditi, se necessario, in modo che gli elementi riempiano completamente la larghezza (per la direzione della flessione: riga ) e l'altezza (per la direzione della flessione: colonna ).
La proprietà flex-grow assume un rapporto. Quindi, se impostiamo la proprietà flex-grow su 1, tutti i nostri articoli avranno le stesse dimensioni di puoi vedere qui .
.room {background:#00AAF2;height:90px;flex-grow:1;}Oltre a prendere una dimensione uguale, possiamo anche impostare diversi rapporti. Voglio ancora che la mia cucina sia più grande del mio bagno, quindi sistemiamola in questa demo .
.kitchen {height:300px;flex-grow:2;}flex-shrink funziona esattamente come flex-grow, tranne per il fatto che riduce l'oggetto se necessario, invece di espanderlo.
Se ridimensionate il browser, vedrete che in diverse dimensioni, la mia cucina non è esattamente il doppio della larghezza delle altre stanze . Ciò è dovuto alla proprietà flex-base .
flex-base determina come vengono calcolate le proprietà flex-grow e flex-shrink . Ha 2 valori: auto (predefinito) e 0.
Se impostato su 0, viene preso in considerazione l'intero elemento. Se impostato su auto , è il riempimento attorno al contenuto dell'articolo che viene ridimensionato. In altre parole, 0 ignora la dimensione del contenuto dell'articolo durante il calcolo e l' auto lo prende in considerazione. C'è un diagramma a portata di mano fornito dal W3C che spiega questo.
Ecco una demo di cosa succede quando imposto la flex-base: 0 nell'esempio sopra.
flex-base: 0 è particolarmente utile se si desidera spaziare gli oggetti in modo uniforme, indipendentemente dal loro contenuto.
Come detto sopra, la proprietà flex è una scorciatoia per queste proprietà e scoprirai che è il modo più affidabile per impostare questi valori.
L'ordine dei valori è flex-grow, flex-shrink, flex-base. Quindi, per impostare un valore di crescita pari a 2, un valore di riduzione di 1 e una base di 0, devi utilizzare:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Una delle migliori caratteristiche di flexbox è la sua capacità di modificare l'ordine degli articoli, senza alterare il markup; questo è particolarmente utile per l'accessibilità, in quanto ci consente di codificare il codice in modo appropriato e quindi di visualizzarlo in modo ottimale.
Per fare ciò usiamo la proprietà dell'ordine dell'articolo.
Guardando il nostro esempio, il bagno è proprio accanto alla cucina. Preferirei che fosse vicino alle camere da letto, così posso salire dritto nella doccia di una mattina, quindi spostiamolo. Attualmente è il 2 ° oggetto, vogliamo che sia il terzo. Quindi impostiamo la proprietà dell'ordine di conseguenza in questa demo .
.washroom {height:60px;order:2;}Guarda come è saltato fino alla fine della fila? È vicino alle camere da letto, ma non come intendevamo. Questo è un trucco importante in flexbox, perché molti sviluppatori (me compreso) inizialmente si aspettano che l' ordine funzioni come un array.
l'ordine in realtà funziona come lo z-index dei CSS , il che significa che se non si imposta un ordine per un articolo in modo esplicito si presume che sia inferiore nell'ordine di un articolo per il quale un valore è stato esplicitamente impostato.
Vogliamo che il bagno si scambia con la sala, quindi in questa demo gli unici altri articoli che necessitano di un ordine sono la camera da letto .
.washroom {height:60px;order:2;}.bedroom {order:3;}Nota come entrambe le camere da letto condividono lo stesso numero d'ordine? In casi come quelli il browser ricadrà sull'ordine DOM.
La proprietà dell'oggetto finale è align-self. È usato per cambiare l'allineamento dell'oggetto sull'asse secondario. align-items è usato per allineare tutti gli elementi, e questa proprietà ti dà la possibilità di rinunciare a quell'impostazione generale.
Prende gli stessi cinque valori della proprietà equivalente sul contenitore: baseline, center, flex-end, flex-start e stretch.
Ecco una demo del bagno riallineato.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox è una potente opzione per il layout di contenuti. Sebbene non sia concepito per creare pagine intere, il suo supporto superiore a Grid Layout lo rende un'ottima opzione, soprattutto per i siti Web mobili.
Per dimostrare, metteremo insieme una pagina semplice che utilizza alcune delle tecniche sopra descritte.
Il primo è il nostro markup e alcuni stili di base per la pagina.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Come Puoi vedere , Ho un div con la pagina di identificazione . All'interno della pagina ho una lista non ordinata di notizie. Seguendo le notizie ho l' intestazione, che è sotto il contenuto delle notizie a beneficio dell'accessibilità. Finalmente, ho un footer.
La prima cosa che voglio fare è spostare l' intestazione nella parte superiore della pagina. Per fare ciò, imposteremo la pagina come contenitore flessibile. Quindi imposteremo la direzione sulla colonna. Quindi assegna un ordine a ciascun elemento figlio della pagina .
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}Il prossimo passo è quello di stendere l' intestazione. Gli elementi figlio all'interno dei contenitori Flexbox possono essere contenitori Flexbox a sé stanti, quindi possiamo usare flexbox per distribuire uniformemente gli elementi dell'intestazione .
Impostiamo l' intestazione come un contenitore flexbox, quindi diamo uno spazio uniforme al contenuto, senza imbottiture extra ai lati, e infine assicuriamoci che le voci del menu siano sulla stessa linea di base del logo.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Le nostre notizie saranno segnaposto per le storie in primo piano, quindi devono essere di dimensioni considerevoli per fare spazio a testo, un'immagine o video. Quindi abbiamo bisogno di loro per avvolgere.
Impostiamo il div di notizie per essere un contenitore di flexbox. Quindi, diamo alla notizia alcune dimensioni minime e un po 'di colore in modo che possiamo vederle chiaramente.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Ora abbiamo bisogno di impostare il contenitore delle notizie per avvolgere, e le notizie dovrebbero espandersi per riempire lo spazio disponibile.
#news {order:2;display:flex;flex-flow:row wrap;}La sfida che abbiamo ora è che quando i notiziari non sono equamente distribuiti, l'elemento più grande (G) è in fondo. Sulla maggior parte dei siti, vogliamo dare la massima quantità di spazio al contenuto più in alto. Possiamo risolvere questo problema impostando l'involucro per il ritorno a capo.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Questo riordina gli oggetti, ma leggendo da in alto a sinistra, sono ora fuori uso. Quindi abbiamo bisogno di invertire l'ordine, impostando la direzione per l' inversione di riga.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Che posiziona gli oggetti in ordine consecutivo, leggendo da sinistra a destra, dall'alto in basso; con gli oggetti più grandi sempre in alto. Ma non voglio modificare l'ordine delle storie nel mio markup per forzare l'elemento A a venire prima dell'articolo B. Quindi l'ultima cosa che devo fare è cambiare l'ordine degli articoli.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}L'ultimo elemento da designare è il piè di pagina. Vogliamo stenderlo, molto simile all'intestazione , ma poiché il piè di pagina ha solo tre elementi figlio (rispetto ai quattro dell'intestazione ), imposteremo il paragrafo in modo che sia largo il doppio del logo e l'elenco .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Funziona alla grande con le dimensioni del desktop, ma riduce il browser e vedrai che è troppo piccolo su dispositivi di piccole dimensioni. Quindi cambiamo il codice in modo che sia disposto come colonne sotto 600px e ritorni su una riga sopra 600px.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}E il gioco è fatto. Un approccio moderno alla disposizione dei contenuti su una pagina Web, ampiamente supportato e facile da implementare.
La potenza di Flexbox è che le sue proprietà possono essere combinate per darci un controllo preciso sui nostri layout, con la sintassi più semplice possibile.