Flexibles Boxmodell - Display: Flex, Box, Flexbox?

Question

Viele von uns wissen heute, dass die älteren Werte der display-Eigenschaft wie inline und block veraltet sind, nachdem das neue flexible Boxmodell in CSS3 eingeführt wurde. Aber wir könnten im gleichen flexiblen Boxmodell verschiedene Informationen im Web finden.

Wir könnten hauptsächlich 3 verschiedene Werte der display Eigenschaft nämlich flex, box und flexbox finden. Was ist der Unterschied zwischen diesen drei flexiblen Box-Modellen und welchen?

Answer 1

Sie verwenden die, die Sie für die Browser benötigen, die Sie unterstützen müssen.

display: box

• 2,0 Firefox? (Präfix)
• Chrome 4.0? (Präfix)
• Safari/iOS 3.1? (Präfix)
• Android 2.1 (Präfix)

Soweit ich das beurteilen kann, über box-lines: multiple Verpackung ist nicht in jedem Browser implementiert.

display: flexbox

• Chrome 17- ?? (Präfix)
• Internet Explorer 10 (Präfix)

display: flex - den aktuellen Standard

• Chrome 21 (Präfix), 29 (ohne Präfix)
• Opera 12.1 (ohne Präfix), 15 (webkit prefix)
• Firefox 22 (ohne Präfix)
• Safari/IOS 7 (Präfix)
• Blackberry 10 (Präfix)
• Internet Explorer 11 (ohne Präfix)

http://caniuse.com/#feat=flexbox (Beachten Sie, dass IE10 der einzige Browser als mit teilweise Unterstützung, die Umbrüche unterstützt markiert ist)

die Spezifikationen für flexbox und flex ähnlich genug sind, gibt es keine reaso n nicht, um beide zu enthalten, besonders da IE10 nur die flexbox Spezifikation unterstützt. Die Spezifikation für box ist sehr unterschiedlich und möglicherweise nicht wert, abhängig von der Wirkung, die Sie anstreben, obwohl fast alle Eigenschaften analog zu denen in den flexbox/flex Spezifikationen gefunden haben.

Sie können feststellen, dass es einige Browser gibt, die mehrere Spezifikationen unterstützen. Es wird wahrscheinlich eine Zeit kommen, wo sie die Unterstützung für die ältere Spezifikation fallen lassen, also stellen Sie immer sicher, dass Sie die flex Eigenschaften einschließen.

Answer 2

Soweit ich weiß, können die obigen drei verschiedenen Versionen des flexiblen Boxmodells nach ihrem Alter klassifiziert werden.

1. display: box - Dies war das erste flexible Box-Modell, das als das neueste Modell um das Jahr 2009. Sie es nicht angenommen wurde verwenden.

2. display: flexbox - Dieses flexible Boxmodell kam im Jahr 2011, das noch in seiner Entwicklung war. Benutze es nicht.

3. display: flex - Dies ist das neueste flexible Box-Modell, das derzeit seinen Platz als den neuesten Box-Standard findet. Dies könnte weitere Änderungen erfahren, aber dies wird gegenüber den anderen beiden Standards bevorzugt.