2013-05-20 14 views
7

Recentemente ho imbattuto in un tutorial in cui l'istruttore usato questa sintassi:scatola webkit vs boxflex

display: -webkit-box; 

http://www.youtube.com/watch?v=B-MNkBh7F2A @ 02:30 (creato ago 2012)

non avevo mai visto prima e cominciò cercando di trovare alcune informazioni su di esso. Sembra che CSS3 abbia qualcosa chiamato flexbox. Ma non ho trovato riferimenti alla sintassi precedente.

In questo articolo http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/, scritto un anno prima il tutorial (settembre 2011) di cui sopra, usano questa sintassi:

display: box; 

e di dialogo di cui verrà sostituita con FlexBox.

Non sono ancora sicuro di quale sia il vantaggio di Flexbox o Box. Non vedo le persone che lo usano. Qualcuno può dare un riassunto di base di esso?

Inoltre, perché il tutorial usa -webkit-box? box webkit specifico? Perché non ha usato

display: scatola;

Does -webkit-box significa che funziona solo in Safari e Chrome?

Se è compatibile con più browser, con quali browser e versioni funziona?

casella (non webkit) sembra essere compatibile con più browser.

+0

possibile duplicato di [CSS3 Flexbox: display: box vs flexbox vs flex] (http://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex) – cimmanon

risposta

5

penso che questo argomento riassume il meglio: http://css-tricks.com/old-flexbox-and-new-flexbox/

Fondamentalmente Flexbox ha 3 diversi "iterazioni" del markup. Il vecchio markup del 2009, il vecchio markup del 2011 e il "nuovo" markup che non è ancora stato ufficialmente pubblicato o supportato. È importante notare che, nonostante il video che hai collegato al caricamento nel 2012, il ragazzo che ha realizzato il video è usando la vecchia implementazione 2009 di flexbox. Suggerirei di NON seguire questo tutorial.

Qui ci sono alcuni più risorse: http://www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css-flexbox/

E posso usarlo? http://caniuse.com/#search=flexbox

+0

Bene grazie. Quindi dovrei dire un "no" preciso all'utilizzo di flexbox. Supporto solo parziale per IE10, FF 19-21 e Safari 5.1 - 6.0. Chrome ha il miglior supporto. Non ci sono abbastanza browser che lo usano. Lo leggi nello stesso modo? – 4thSpace

+0

Alcune persone non considererebbero un no definitivo, in effetti ci sono persone che usano il nuovo modello ora e ci sono modi per fornire un degrado aggraziato, ma lo considero più lavoro di quanto valga in questo momento. Detto questo, credo che là fuori ci siano alcuni "polyfill" in javascript per il nuovo modello di flexbox, ma non ne conosco nessuno. Un tale esempio è flexie.js - ma questo è per la "vecchia" iterazione del 2011 delle specifiche. Tutto sommato, è un magnifico pezzetto di codice ed è estremamente potente, ma per ora dico di essere paziente, e aspetto il supporto ufficiale – Michael

+0

Opera e Chrome utilizzano entrambe le proprietà standard. – cimmanon

-1

il -webkit-box è il più recente e consente di risparmiare tanto tempo utilizzando il vecchio stile che richiede un sacco di javascript, così nella progettazione con il webkit si stanno producendo il proprio lavoro ai più recenti standard e un grande risparmio sull'orario dell'uomo.