Flex, Box oder Flexbox: Welchen Anzeigewert sollten Sie verwenden?

Das flexible Box-Modell: Navigieren in den Werten „Flex“, „Box“ und „Flexbox“

Das Aufkommen des flexiblen Box-Modells führte einen Paradigmenwechsel in CSS3 ein und löste die Verwendung von Anzeigefunktionen wie Inline und Block aus. Das flexible Boxmodell wird jedoch häufig mit verschiedenen Werten dargestellt, darunter „Flex“, „Box“ und „Flexbox“. Dieser Artikel geht auf die Unterschiede zwischen diesen Werten ein und gibt Hinweise zu ihrer Verwendung.

Anzeige: Flex

Anzeige: Flex ist der aktuelle Standardwert. Es unterstützt moderne Browser, darunter Chrome 29, Firefox 22, Safari 7 und Internet Explorer 11. Flex bietet erweiterte Funktionen für die Layoutverwaltung, einschließlich der Möglichkeit, Elemente sowohl entlang der horizontalen als auch der vertikalen Achse auszurichten und zu verteilen.

Anzeige: Box

Anzeige: Box ist älter Wert, der bereits früher bei der Entwicklung des flexiblen Boxmodells eingeführt wurde. Es wird in den meisten gängigen Browsern mit Herstellerpräfixen unterstützt, wird jedoch im Allgemeinen zugunsten von display: flex eingestellt.

Display: flexbox

Display: flexbox ist ein weiterer Zwischenwert Das wurde eingeführt, um den Übergang von display:box zu display:flex zu überbrücken. Es wird in neueren Browsern mit Herstellerpräfixen unterstützt und ähnelt display:flex hinsichtlich der Funktionalität.

Welcher Wert soll verwendet werden?

Letztendlich liegt die Wahl zwischen diesen Die Werte hängen von den Browsern ab, die Sie unterstützen müssen. Wenn Sie Abwärtskompatibilität benötigen, sollten Sie die Verwendung von display: box mit Browser-Präfixen in Betracht ziehen. Für eine modernere Browserunterstützung ist display:flex die empfohlene Option.

Zusätzliche Hinweise

• Die Box-Spezifikation weicht erheblich von den Flexbox-/Flex-Spezifikationen ab und kann möglicherweise nicht immer geeignet, um die gewünschten Ergebnisse zu erzielen.
• Einige Browser unterstützen möglicherweise mehrere Anzeigewerte. Es wird jedoch empfohlen, aus Gründen der Zukunftssicherheit nach Möglichkeit Flex-Eigenschaften einzubeziehen.
• Ausführliche Informationen zur Browserunterstützung finden Sie unter caniuse.com/#feat=flexbox.

Das obige ist der detaillierte Inhalt vonFlex, Box oder Flexbox: Welchen Anzeigewert sollten Sie verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!