webkit-box vs boxflex

Ich habe vor kurzem lief über ein tutorial, wo der Lehrer benutzt diese syntax:

display: -webkit-box;

http://www.youtube.com/watch?v=B-MNkBh7F2A @ 2:30 (erstellt aug 2012)

Hatte ich nicht gesehen vorher und begann zu versuchen zu finden, einige Informationen über Sie. Es scheint, CSS3 hat etwas namens flexbox. Aber ich konnte nicht finden, dass Referenzen der oben genannten syntax.

In diesem Artikel http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/, geschrieben ein Jahr vor dem oben genannten tutorial (sept 2011), verwenden Sie diese syntax:

display: box;

und genannten box ersetzt werden, mit flexbox.

Bin ich mir noch nicht sicher, was der Vorteil von flexbox oder box ist. Ich sehe nicht, Leute, die es. Kann jemand eine grundlegende Zusammenfassung von es?

Auch, warum das tutorial verwenden -webkit-box? Ist box webkit-spezifische? Warum hat er es nicht verwenden

display: box;

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

Wenn es ist cross-browser kompatibel, welche Browser und Versionen funktioniert es mit?

box (nicht webkit) scheint die cross-browser-kompatibel.

InformationsquelleAutor 4thSpace | 2013-05-20
  1. 8

    Ich denke, dieses Thema fasst es am besten: http://css-tricks.com/old-flexbox-and-new-flexbox/

    Grundsätzlich Flexbox-ist aus 3 verschiedenen "Iterationen" des markup. Die alte 2009-markup, die immer noch die alten 2011 markup, und die "neuen" Markups, die nicht offiziell veröffentlicht oder unterstützt noch.Es ist wichtig zu beachten, dass trotz der Videos, die Sie verlinkt hochgeladen in 2012, der Kerl, der das video gemacht hat ist mit den wirklich alten 2009 Umsetzung von flexbox. Ich würde vorschlagen, NICHT nach lehrbuch.

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

    Und Kann ich es Nutzen?
    http://caniuse.com/#search=flexbox

    • Schön, danke. Also ich würde sagen ein entschiedenes "Nein" zur Verwendung von flexbox. Nur teilweise Unterstützung für IE10, FF 19 - 21, und Safari 5.1 - 6.0. Chrome hat die beste Unterstützung. Es sind einfach nicht genug-Browser verwenden. Sie Lesen es die gleiche Weise?
    • Manche Leute würden es nicht als ein klares Nein, in der Tat gibt es Menschen, die mit dem neuen Modell jetzt, und es gibt Möglichkeiten zu bieten, graceful degradation, aber ich halte es mehr Arbeit als es Wert ist auf den gegenwärtigen moment. Das heißt, ich glaube es gibt einige javascript "polyfills" gibt für die neue flexbox-Modell, aber ich nicht aus der hand bekannt. Ist so ein Beispiel flexie.js - aber das ist für die "alte" 2011-iteration der Spezifikation. Alle Dinge betrachtet, es ist eine herrliche Stück code und ist extrem mächtig, aber für jetzt sage ich geduldig sein und warten, bis die offizielle Unterstützung
    • Opera und Chrome sind sowohl mit den standard-Eigenschaften.
    InformationsquelleAutor Michael
  2. -6

    dem -webkit-box ist die neueste und spart so viel Zeit mit dem alten Stil, das erfordert eine Menge von javascript ,also in der Gestaltung mit der webkit-Sie produzieren in Ihrer Arbeit nach den neuesten standards und eine große Einsparung an Arbeitsstunden.

    InformationsquelleAutor user7112237
Schreibe einen Kommentar