it-swarm.com.de

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

Gestern habe ich eine Webseite in der Schule bekommen, die die CSS 3 flexbox) Anweisung verwendet. Ich habe das noch nie benutzt. Also habe ich ein bisschen gegoogelt und viele verschiedene Stile der flexbox Anweisungen.

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

Was sind die Unterschiede? Welche soll ich verwenden?

66
user1722486

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 hat einige wichtige Überarbeitungen durchlaufen, sodass dieser Artikel nicht mehr aktuell ist. Zusammenfassend ist dies der alte Standard (Flexbox 2009) , auf dem dieser Artikel basiert , wurde in Chrome seit v4, Firefox seit v2 und IE10 Beta implementiert.

Seitdem hat der neue flexbox standard debütiert und begann in Chrome 17. Stephan Hay hat geschrieben a Anleitung zur neuen flexbox Implementierung Seitdem wurden die Namen der Spezifikation geändert und landeten in Chrome 21. Chrome 22 hat eine stabile Implementierung der neuesten Spezifikation.

An dieser Stelle müssen Sie entweder hat seine Risiken implementieren, also seien Sie sich dessen bewusst.

hier ist der Blog über die verschiedenen flexbox Statements.
This ist ein Blogeintrag von CSS-Tricks zu den 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, das flexbox layouts) anzeigen kann. Für Fallback-Lösungen oder Alternativen gibt es also diesen Artikel von Kenan Yusuf, wie zu verwenden flexbox ohne flexbox .

127
Michael Schmidt

Die Spezifikation wurde mehrfach wiederholt, siehe 2009 , 2012 , 201 und jedes Mal, wenn der Wert geändert wurde. display: flex; ist die neueste.

Es handelt sich immer noch um einen Entwurf einer Spezifikation, sodass sich die derzeitige Implementierung möglicherweise noch ändert.

9
andyb

anzeige: Flex; Ist die aktuellste und bessere Version, können wir diese in unserem Code verwenden.

Also mach das.

1
johnie