2013-05-20 7 views
7

ich vor kurzem lief über ein Tutorial, in dem der Lehrer diese Syntax verwendet:webkit Box vs boxflex

display: -webkit-box; 

http://www.youtube.com/watch?v=B-MNkBh7F2A @ 2.30 (August 2012 erstellt)

ich das nicht vorher gesehen hatte und begann versuchen, einige Informationen darüber zu finden. Es scheint, dass CSS3 etwas namens flexbox hat. Aber ich konnte die obige Syntax nicht finden.

In diesem Artikel http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/, ein Jahr vor dem obigen Tutorial (September 2011) geschrieben, verwenden sie diese Syntax:

display: box; 

und erwähnte Box mit Flexbox ersetzt werden.

Ich bin mir immer noch nicht sicher, was der Vorteil von Flexbox oder Box ist. Ich sehe nicht, dass Leute es benutzen. Kann jemand eine grundlegende Zusammenfassung davon geben?

Warum verwendet das Tutorial auch -webkit-box? Ist Box webkit spezifisch? Warum hat er nicht verwendet

Anzeige: Box;

Bedeutet -webkit-box, dass es nur in Safari und Chrome funktioniert?

Wenn es Cross-Browser-kompatibel ist, mit welchen Browsern und Versionen funktioniert es?

Box (nicht Webkit) scheint Cross-Browser-kompatibel zu sein.

+0

mögliches Duplikat von [CSS3 Flexbox: Anzeige: Box vs. flexbox vs. flex] (http://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex) – cimmanon

Antwort

5

Ich denke, das Thema, um es der beste fasst zusammen: http://css-tricks.com/old-flexbox-and-new-flexbox/

Grundsätzlich Flexbox hat 3 verschiedene „Iterationen“ des Markup. Das alte Markup 2009, das noch alte 2011 Markup und das "neue" Markup, das noch nicht offiziell veröffentlicht oder unterstützt wird. Es ist wichtig zu beachten, dass der Video-Produzent trotz des Videos, mit dem du im Jahr 2012 hochgeladen hast mit der wirklich alten 2009er Implementierung von flexbox. Ich würde vorschlagen, diesem Tutorial NICHT zu folgen.

Hier sind einige weitere Informationen: http://www.w3.org/TR/css3-flexbox/ http://dev.w3.org/csswg/css-flexbox/

Und kann ich es benutzen? http://caniuse.com/#search=flexbox

+0

Nett, danke. Also muss ich ein definitives "Nein" zur Verwendung von Flexbox sagen. Nur teilweise Unterstützung für IE10, FF 19 - 21 und Safari 5.1 - 6.0. Chrome bietet die beste Unterstützung. Es gibt einfach nicht genug Browser, die es benutzen. Liest du es genauso? – 4thSpace

+0

Manche Leute würden es nicht als definitives Nein betrachten, tatsächlich gibt es Leute, die das neue Modell jetzt benutzen und es gibt Möglichkeiten, um eine graziöse Degradierung zu erreichen, aber ich halte es für mehr Arbeit, als es im Moment wert ist. Das heißt, ich glaube, es gibt einige Javascript "Polyfills" für das neue Flexbox-Modell, aber ich kenne sie nicht. Ein solches Beispiel ist Flexie.js - aber das ist für die "alte" 2011 Iteration der Spezifikation. Alles in allem ist es ein großartiger Code und extrem leistungsfähig, aber jetzt sage ich, sei geduldig und warte auf die offizielle Unterstützung. – Michael

+0

Opera und Chrome verwenden beide die Standardeigenschaften. – cimmanon

-1

die -webkit-Box ist die neueste und spart so viel Zeit auf den alten Stil verwendet, die eine Menge von Javascript erfordert, so mit dem WebKit bei der Gestaltung Sie Ihre Arbeit auf den neuesten Stand und eine große Einsparung produzieren auf Mannstunden.