<display-legacy>

CSS 2 nutzte eine Einkeyword-Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block- und Inline-Varianten des gleichen Layout-Modus erforderte. Diese Seite beschreibt diese Werte.

Syntax

Gültige <display-legacy> Werte:

inline-block

Das Element erzeugt ein Blockelement-Box, das mit dem umgebenden Inhalt so fließt, als ob es eine einzelne Inline-Box wäre (ähnlich wie ein ersetztes Element).

Es entspricht inline flow-root.

inline-table

Der inline-table Wert hat keine direkte Entsprechung in HTML. Es verhält sich wie ein HTML <table> Element, jedoch als Inline-Box statt als Block-Level-Box. Innerhalb der Tabellenbox befindet sich ein Block-Level-Kontext.

Es entspricht inline table.

inline-flex

Das Element verhält sich wie ein Inline-Element und ordnet seinen Inhalt gemäß dem Flexbox-Modell an.

Es entspricht inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Element und ordnet seinen Inhalt gemäß dem Grid-Modell an.

Es entspricht inline grid.

Formale Syntax

<display-legacy> = 
inline-block |
inline-table |
inline-flex |
inline-grid

Beispiele

Im folgenden Beispiel erstellen wir einen Inline-Flex-Container mit dem Legacy-Schlüsselwort inline-flex.

HTML

html
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item

CSS

css
.container {
  display: inline-flex;
}

Ergebnis

In der neuen Syntax würde der Inline-Flex-Container durch die Verwendung von zwei Werten erstellt werden: inline für den äußeren Display-Typ und flex für den inneren Display-Typ.

css
.container {
  display: inline flex;
}

Spezifikationen

Specification
CSS Display Module Level 3
# typedef-display-legacy

Browser-Kompatibilität

css.properties.display.inline-block

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline-table

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-table

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline-flex

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-flex

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

css.properties.display.inline-grid

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline-grid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch