CSS3 Flexbox: Anzeige: Box vs. Flexbox vs. Flex

83

Gestern habe ich in der Schule eine Website bekommen, die die CSS 3 Flexbox-Anweisung verwendet. Das habe ich noch nie benutzt. Also habe ich ein bisschen gegoogelt und viele verschiedene Stile der Flexbox-Anweisungen gefunden.

Einige Leute schreiben display: box;, andere benutzen display: flexbox;und andere display: flex;.

Was sind die Unterschiede? Welches sollte ich verwenden?

css flexbox Peter Mortensen
quelle
7
Genaues Duplikat: stackoverflow.com/questions/15662578/…
Cimmanon
Aber welches wird zuerst eine akzeptierte Antwort erhalten ... Ich würde Ihre Wetten @cimmanon absichern und Ihre Antwort an beide senden!
Andyb
3
Es spielt keine Rolle, welche geschlossen ist. Eine ältere Frage kann geschlossen werden, wenn eine neuere bessere Antworten hat. Ich würde spekulieren, dass die ältere Frage, die genau zur gleichen Zeit als "Frage und Antwort" veröffentlicht wurde, entweder nie akzeptiert wird oder das OP ihre eigene Antwort akzeptiert. Wie gesagt, ich würde Ihre Antwort hier duplizieren und abstimmen, um die ältere als Duplikat dieser zu schließen, vorausgesetzt, das OP akzeptiert eine Antwort :-)
andyb
2
@andyb: Für mich haben beide Antworten hier bessere Links und auch eine Lösung ... Ich denke also, meine Frage sollte nicht geschlossen werden, auch wenn es sich um ein Duplikat handelt.
2
@andyb: Ah! Das habe ich irgendwie vermisst. Wir werden uns in Kürze darum kümmern. Vielen Dank.
BoltClock

Antworten:

150

Dies sind verschiedene Stile.
display: box;ist eine Version von 2009.
display: flexbox;ist eine Version von 2011.
display: flex;ist die aktuelle Version.

Zitat von Paul Irish

Warnung: Flexbox wurde grundlegend überarbeitet, sodass dieser Artikel nicht mehr aktuell ist. Zusammenfassend wurde der alte Standard (Flexbox 2009) , auf dem dieser Artikel basiert, in Chrome seit Version 4, Firefox seit Version 2 und IE10 Beta implementiert.

Seitdem wurde der neue Flexbox-Standard in Chrome 17 eingeführt und eingeführt. Stephan Hay hat einen Leitfaden zur neuen Flexbox-Implementierung verfasst . Seitdem wurden für die Spezifikation Namensänderungen vorgenommen, die in Chrome 21 landeten. Chrome 22 verfügt über eine stabile Implementierung der neuesten Spezifikation.

An diesem Punkt birgt die Implementierung beide Risiken . Seien Sie sich also bewusst.

Hier ist der Blog über die verschiedenen Flexbox-Anweisungen.
Dies ist ein Blogeintrag von CSS-Tricks über die verschiedenen Versionen.

Wenn ich Flexbox benutze, schreibe ich es immer so:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Bearbeiten:
Immer noch hat nicht jeder einen Browser / ein Gerät, der Flexbox-Layouts anzeigen kann. Für Fallback-Lösungen oder Alternativen gibt es diesen Artikel von Kenan Yusuf über die Verwendung von Flexbox ohne Verwendung von Flexbox .

Michael Schmidt
quelle
Die Reihenfolge der Erklärung scheint wichtig zu sein. Ich habe an altem Android-Chrome gearbeitet, das nur -webkit-box unterstützt. Diese Deklaration muss zuletzt erfolgen, um wirksam zu sein. Hat jemand das auch erlebt?
Ken
3
@ Ken Nein, -webkit-boxkommt zuerst. Ihre letzte Erklärung sollte immer die aktuellste oder der W3C-Standard sein. Allerdings würde ich -ms-flexboxnachher empfehlen, -webkit-flexda IE12 / Edge unterstützt -webkit-flex, aber Sie möchten technisch, dass der IE -ms-stattdessen das richtige Präfix verwendet -webkit-. Es ist eine allgemeine Vorsicht Nitpick als Anzeige: Flex; ist hier nicht von IE12 betroffen.
Hexalys
9

Die Spezifikation hat viele Iterationen durchlaufen, siehe 2009 , 2012 , 2013 und jedes Mal, wenn der Wert geändert wurde. display: flex;ist die neueste.

Es handelt sich immer noch um einen Spezifikationsentwurf, sodass sich jede aktuelle Implementierung noch ändern kann.

andyb
quelle
1

Anzeige: flex; Ist die neueste und bessere Version derzeit können wir das in unserem Code verwenden.

Also mach das.

Johnie
quelle