Share
Il CSS, nonostante il suo livello di competenza percepito relativamente basso, sembra sempre avere un killer nella manica. Ricorda come le query multimediali hanno reso possibili layout reattivi e hanno rivoluzionato lo sviluppo front-end? Bene, oggi parleremo di una nuova modalità di layout, chiamata flexbox, nuova in CSS3. Sono sicuro che stai andando di rado! Iniziamo dopo il salto.
Modifiche successive alle tecniche e al softwareAlcuni aspetti delle applicazioni o delle tecniche utilizzate in questo tutorial sono cambiati da quando è stato originariamente pubblicato. Questo potrebbe rendere un po 'difficile da seguire. Ti consigliamo di guardare questi tutorial più recenti sullo stesso argomento:
Attualmente, la specifica CSS Flexbox è una bozza di lavoro e le cose cambieranno! Gli esempi di questo tutorial potrebbero potenzialmente non riuscire a funzionare in futuro, dal momento che i browser modificano la loro implementazione in flexbox per adattarsi alle specifiche. Lo scopo di questo tutorial è fornire una conoscenza di base della CSSbox CSS e dimostrare come utilizzarla nelle tue pagine web.
Si prega di notare che questo tutorial userà esempi prefissati per webkit / non-vendor per brevità. Dai un'occhiata a caniuse.com per un elenco di browser che supportano il modulo flexbox e fai riferimento ai prefissi necessari nei tuoi progetti, di conseguenza.
CSS Flexbox è essenzialmente una modalità di layout. Esistono le modalità di layout esistenti nei CSS e sono lì da molto tempo. È un esempio di una modalità di layout bloccare (ad esempio display: block). I layout di blocco sono un ottimo modo per stilare interi documenti, molti elementi sono trattati dal browser come livello di blocco, per impostazione predefinita; questi includono elementi comuni, come paragrafi e divS.
Occasionalmente, quando un elemento non è un blocco, è probabile che lo sia in linea. Gli elementi di livello inline includono il tag di ancoraggio, il tag di input e il tag forte. Gli strumenti di sviluppo di Chrome consentono effettivamente di visualizzare lo "stile calcolato" di un elemento, che è un ottimo modo per determinare quali proprietà e valori CSS sono stati applicati a elementi che non sono stati impostati esplicitamente dallo sviluppatore.
Ecco un suggerimento per accedere allo stile calcolato di un elemento utilizzando il metodo window.getComputedStyle di JavaScript.
Accentsconagua
var elem = document.querySelector ('h1 # someId'); window.getComputedStyle (elem) .display; //bloccare Blocchi e modalità di layout in linea a parte, il CSS ha anche presentato e posizionato le modalità di layout. Il motivo per cui le modalità di layout vengono referenziate è perché flexbox è una nuova modalità di layout, che consente una maggiore flessibilità durante la creazione di pagine Web.
Il layout della flexbox ci fornisce semplici tecniche per dettare facilmente il modo in cui gli articoli devono essere disposti.
Per forzare un elemento a usare il layout della flexbox, aggiungiamo il FlexBox valore alla proprietà display.
#container display: flexbox;
Per impostazione predefinita, un flexbox è un elemento a livello di blocco; possiamo definire un elemento a livello di riga in questo modo:
#container display: inline-flexbox;
Simile all'esempio sopra, ti consigliamo di applicare il layout della flexbox al genitore dei bambini di cui desideri controllare il posizionamento. Diamo un'occhiata al semplice esempio dal vivo.
ul / * Old Syntax * / display: -webkit-box; / * Nuova sintassi * / display: -webkit-flexbox;
Noterai che gli elementi dell'elemento della lista ora stanno scorrendo orizzontalmente, in modo simile a come potrebbero essere visualizzati, se li avessimo usati float: a sinistra. Gli elementi dell'elemento della lista possono ora essere indicati come articoli di flexbox.
Nota: un discendente diretto di un flexbox, che è assolutamente posizionato, ad es. utilizzando
posizione: assoluta, non può essere un elemento di flexbox, in quanto interrompe il flusso normale.
Si può notare che gli elementi (gli elementi dell'elenco) hanno assunto un flusso orizzontale (la direzione del flusso è anche nota come asse principale). Fortunatamente, siamo in grado di controllare questo flusso (e quindi quello che è considerato l'asse principale) ed evitare l'uso di galleggianti!
flex-direzione Possiamo applicare il flex-direzione proprietà e specificare la direzione in cui desideriamo che i nostri articoli flexbox siano disposti. La proprietà accetta riga, riga-indietro, colonna e colonna-indietro come valori. Il valore predefinito è riga.
Usando il markup simile all'esempio precedente, possiamo aggiungere un'altra proprietà CSS: coppia di valori: (flex-direction: column)
ul -webkit-flex-direction: column;
Se stai lavorando, vai avanti e prova a cambiare colonna valore sul flex-direzione proprietà a Colonna-reverse, e vedere come gli elementi della flexbox sono visualizzati in un layout con colonne, ma nell'ordine inverso.
flex-wrap Per impostazione predefinita, una flexbox è a linea singola. Uno che non può contenere i suoi figli può traboccare usando il flex-wrap proprietà; possiamo istruire la flexbox affinché diventi multi-linea, nel qual caso gli articoli della flexbox possono essere avvolti. flex-wrap accetta i valori, nowrap (il valore predefinito), avvolgere & wrap-inversa.
Notate come, nella demo, gli oggetti si "avvolgono", poiché non possono essere contenuti all'interno del loro piccolo 100px genitore. Utilizzando gli strumenti di sviluppo, prova a cambiare il overflow: nascosto e -webkit-flex-wrap bit. Senza il flex-wrap e straripamento proprietà, gli oggetti superano i loro genitori.
C'è una utile proprietà di stenografia per flex-direzione e flex-wrap, come mostrato di seguito:
direzione della flessione: riga; flex-wrap: nowrap; // Usando i due valori sopra con la stenografia flex-flow otteniamo: flew-flow: row nowrap; // flex-direction: column; flex-wrap: wrap; flex-flow: colonna wrap;
Mentre certamente non è il più bello che ci sia, questo menu di esempio dimostra alcuni usi per la flexbox.
300px è stato impostato sulla Flexbox, a sua volta, per dimostrare il wrapping.direzione della flessione: colonna potrebbe avere senso.
Sarebbe bello istruire gli elementi della flexbox per diffondersi e utilizzare lo spazio che hanno a loro disposizione - qualcosa del genere. Ecco a cosa serve la proprietà flex.
Flettere è la capacità del contenitore di modificare la sua larghezza o altezza per riempire lo spazio disponibile. "
Il flettere la proprietà è una bella caratteristica; offre qualcosa di nuovo che sarebbe stato difficile da raggiungere in passato.
Con questa proprietà, possiamo impostare una dimensione preferita per i nostri articoli. Tieni presente che la proprietà flex viene applicata sugli elementi della flexbox, non sulla stessa. Il browser tenterà di impostare la dimensione degli elementi della flexbox su a base per riga. Quindi tenterà di distribuire equamente lo spazio libero rimanente sugli articoli. Se guardiamo all'esempio del menu e usiamo gli strumenti di sviluppo per scoprire la larghezza calcolata degli elementi della flexbox, vedremo che è 78px. Analizziamo ulteriormente ...
Probabilmente ti starai chiedendo, "In che modo gli oggetti della flexbox hanno guadagnato il loro spazio in più quando abbiamo impostato la larghezza preferita su 60px?"
60pxflex proprietà (che è un totale di 180px).300px. Quello, meno 180px (la dimensione totale preferita degli articoli), è 120px. Tuttavia, non sembra che effettivamente abbiamo 120px di spazio libero.margin-right di 10px; questo è un totale di 30px per tre articoli, lasciandoci con 90px di spazio libero.5px - quello è 5px di imbottitura in alto, a destra, in basso ea sinistra. Quindi, simile al margin-right proprietà, ogni voce consuma 10px di imbottitura in relazione alla sua larghezza. Siamo rimasti con 60px di spazio libero - beh quasi.bordo: 1px solido nero - 1px sui lati sinistro e destro. Un totale di due pixel per articolo, quindi, per tre elementi, che arriva a 6px. Ora siamo rimasti con 54px di spazio libero.54px di spazio libero, possiamo distribuirlo allo stesso modo dei tre elementi sulla prima riga - questo è 18px, per articolo, che ora ha senso perché, quando impostiamo una preferenza per 60px, la larghezza calcolata trasformata in 78px.Come avrai intuito, l'ultima riga (contenente l'elemento "Contattaci") si flette per tutta la larghezza della flexbox.
Gli oggetti di Flexbox possono avere diverse larghezze; un oggetto con a flettere di 2 si dice che sia due volte più flessibile come un oggetto con a flettere di 1. Quindi, quando si tratta di distribuire spazio libero tra i due oggetti, l'oggetto con a flettere di 1 verrà dato metà dello spazio che l'elemento con a flettere di 2 riceve.
Flexbox ci offre un modo semplice per ordinare determinati articoli tramite CSS, indipendentemente dall'ordine in cui appaiono nel documento. Ecco un rapido esempio.
Dato il seguente markup:
ul display: -webkit-flexbox; ul li: nth-child (1) -webkit-flex-order: 2;
Possiamo scegliere come target il primo elemento dell'elemento di elenco utilizzando la pseudo classe nth-child e quindi applicare il flex-ordine proprietà ad esso. Gli elementi di Flexbox sono, per impostazione predefinita, all'ordine 0. Inserendo il primo elemento della lista in ordine 2, il browser visualizzerà prima gli articoli 2 e 3, che saranno seguiti dall'articolo 1.
Siamo in grado di allineare gli elementi della flexbox sull'asse principale usando il flex-pack proprietà. Questa proprietà accetta i seguenti valori come:
La demo di questo tutorial fornisce alcuni esempi dei diversi tipi di allineamento. Osservando l'esempio jsbin, possiamo vedere che gli oggetti sono stati centrati solo su un asse: l'asse principale. Questo è essenzialmente l'asse su cui sono posizionati gli oggetti della flexbox.
Possiamo cambiare l'asse regolando il flex-direzione proprietà. Impostandolo a colonna, diventa evidente che l'asse principale è cambiato. Per poter influire sull'allineamento dell'asse trasversale, (l'asse perpendicolare all'asse principale) possiamo usare flex-align.
Dovrei essere centrato
.flexbox display: -webkit-flexbox; -webkit-flex-pack: center; -webkit-flex-align: center; larghezza: 50%; altezza: 100 px; sfondo: arancione; .flexbox p border: 1px verde fisso; imbottitura: 5px;
Sicuramente dai un'occhiata alla demo live se sei confuso.
Grazie per la lettura, e assicuratevi di fare riferimento a caniuse.com per un elenco di browser che supportano il modulo flexbox, nonché a quali prefissi dei produttori dovrebbe essere fatto riferimento.
