<display-legacy> CSS-Typ

Syntax

Gültige <display-legacy> Werte:

inline-block

Das Element erzeugt eine Blockelement-Box, die mit dem umgebenden Inhalt geflossen wird, als ob es eine einzelne Inline-Box wäre (verhält sich ähnlich wie ein ersetztes Element).

Es ist äquivalent zu inline flow-root.

inline-table

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

Es ist äquivalent zu inline table.

inline-flex

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

Es ist äquivalent zu inline flex.

inline-grid

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

Es ist äquivalent zu inline grid.

Formale Syntax

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

Beispiele

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

HTML

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

Not a flex item

CSS

.container {
  display: inline-flex;
}

Ergebnis

In der neuen Syntax würde der Inline-Flex-Container mit zwei Werten erstellt werden, inline für den äußeren Anzeigetyp und flex für den inneren Anzeigetyp.

.container {
  display: inline flex;
}

Spezifikationen

Browser-Kompatibilität

css.properties.display.inline-block

css.properties.display.inline-table

css.properties.display.inline-flex

css.properties.display.inline-grid

Siehe auch

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>