<display-legacy>
CSS 2 verwendete eine Ein-Schlüsselwort-Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block- und Inline-Varianten desselben Layout-Modus erforderte. Diese Seite beschreibt diese Werte.
Syntax
Gültige <display-legacy> Werte:
inline-block-
Das Element generiert eine Blockelement-Box, die mit dem umgebenden Inhalt geflossen wird, als wäre es eine einzelne Inline-Box (verhält sich ähnlich wie ein ersetztes Element).
Es entspricht
inline flow-root. inline-table-
Der Wert
inline-tablehat keine direkte Zuordnung in HTML. Es verhält sich wie ein HTML<table>Element, jedoch als Inline-Box anstatt einer Blocklevel-Box. Innerhalb der Tabellenbox befindet sich ein Blocklevel-Kontext.Es entspricht
inline table. inline-flex-
Das Element verhält sich wie ein Inline-Element und legt seinen Inhalt gemäß dem Flexbox-Modell an.
Es entspricht
inline flex. inline-grid-
Das Element verhält sich wie ein Inline-Element und legt seinen Inhalt gemäß dem Grid-Modell an.
Es entspricht
inline grid.
Formale Syntax
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 durch die Verwendung zweier Werte erstellt: inline für den äußeren Anzeigetyp und flex für den inneren Anzeigetyp.
.container {
display: inline flex;
}
Spezifikationen
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-legacy |