display

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Die CSS-Eigenschaft display wird unter Verwendung von Schlüsselwortwerten angegeben.

Die Schlüsselwortwerte können in sechs Wertkategorien gruppiert werden.

<display-outside>

Diese Schlüsselwörter spezifizieren den äußeren Display-Typ des Elements, der im Wesentlichen seine Rolle im Flow-Layout festlegt:

block

Das Element erzeugt eine Blockbox, die sowohl vor als auch nach dem Element Zeilenumbrüche erzeugt, wenn es im normalen Fluss ist.

inline

Das Element erzeugt eine oder mehrere Inline-Boxen, die vor oder nach sich selbst keine Zeilenumbrüche erzeugen. Im normalen Fluss wird das nächste Element in derselben Zeile sein, wenn es Platz gibt.

.container {
  display: inline-flex;
  display: inline flex;
}

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Display-Typ des Elements, der den Typ des Formatierungskontextes definiert, in dem sein Inhalt ausgelegt ist (vorausgesetzt, es handelt sich um ein nicht ersetztes Element):

flow

Das Element legt seinen Inhalt unter Verwendung des Flow-Layouts (Block-und-Inline-Layout) aus.

Wenn sein äußerer Display-Typ inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, dann generiert es eine Inline-Box. Andernfalls generiert es eine Blockbox.

Abhängig vom Wert anderer Eigenschaften (wie position, float, oder overflow) und ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, etabliert es entweder einen neuen Blockformatierungskontext (BFC) für seinen Inhalt oder integriert seinen Inhalt in den übergeordneten Formatierungskontext.

flow-root

Das Element erzeugt eine Blockbox, die einen neuen Blockformatierungskontext etabliert und den Punkt definiert, an dem die Formatierungswurzel liegt.

table

Diese Elemente verhalten sich wie HTML-<table>-Elemente. Es definiert eine blocklevel Box.

flex

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

grid

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

ruby

Das Element verhält sich wie ein Inline-Level-Element und legt seinen Inhalt gemäß dem Ruby-Formatierungsmodell aus. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

<display-listitem>

Das Element erzeugt eine Blockbox für den Inhalt und eine separate Listenelement-Inline-Box.

Ein einzelner Wert von list-item lässt das Element sich wie ein Listenelement verhalten. Dies kann zusammen mit list-style-type und list-style-position verwendet werden.

list-item kann auch mit jedem <display-outside> Schlüsselwort und dem flow oder flow-root <display-inside> Schlüsselwort kombiniert werden.

<display-internal>

Einige Layoutmodelle wie table und ruby haben eine komplexe interne Struktur mit mehreren verschiedenen Rollen, die ihre Kinder und Nachkommen spielen können. Dieser Abschnitt definiert diese "internen" Display-Werte, die nur innerhalb dieses bestimmten Layout-Modus eine Bedeutung haben.

table-row-group

Diese Elemente verhalten sich wie HTML-<tbody>-Elemente.

table-header-group

Diese Elemente verhalten sich wie HTML-<thead>-Elemente.

table-footer-group

Diese Elemente verhalten sich wie HTML-<tfoot>-Elemente.

table-row

Diese Elemente verhalten sich wie HTML-<tr>-Elemente.

table-cell

Diese Elemente verhalten sich wie HTML-<td>-Elemente.

table-column-group

Diese Elemente verhalten sich wie HTML-<colgroup>-Elemente.

table-column

Diese Elemente verhalten sich wie HTML-<col>-Elemente.

table-caption

Diese Elemente verhalten sich wie HTML-<caption>-Elemente.

ruby-base

Diese Elemente verhalten sich wie HTML-<rb>-Elemente.

ruby-text

Diese Elemente verhalten sich wie HTML-<rt>-Elemente.

ruby-base-container

Diese Elemente werden als anonyme Boxen generiert.

ruby-text-container

Diese Elemente verhalten sich wie HTML-<rtc>-Elemente.

<display-box>

Diese Werte definieren, ob ein Element überhaupt Display-Boxen erzeugt.

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie, dass die CSS Display Level 3 Spezifikation definiert, wie der contents-Wert "ungewöhnliche Elemente" beeinflussen sollte – Elemente, die nicht rein durch CSS-Boxen-Konzepte wiedergegeben werden, wie ersetzte Elemente. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details.

none

Schaltet die Anzeige eines Elements aus, so dass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existiert). Alle Nachkommenelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, jedoch ohne tatsächlich etwas darzustellen, verwenden Sie stattdessen die Eigenschaft visibility.

<display-legacy>

CSS 2 verwendete eine Einzelschlüsselwort-Syntax für die display-Eigenschaft, die getrennte Schlüsselwörter für Block- und Inline-Varianten desselben Layout-Modus erforderte.

inline-block

Das Element erzeugt eine Blockbox, die als ein einzelnes Inline-Element mit dem umgebenden Inhalt geflossen wird (verhält sich ähnlich wie ein ersetztes Element).

Es ist äquivalent zu 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 und nicht als Block-Level-Box. Innerhalb der Tabellen-Box ist ein Block-Level-Kontext.

Es ist äquivalent zu inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-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-Level-Element und legt seinen Inhalt gemäß dem Grid-Modell aus.

Es ist äquivalent zu inline grid.

Das CSS Display Modul beschreibt eine Multi-Keyword-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um den äußeren und inneren Display explizit zu definieren. Die ein Keyword-Werte (vorgefertigte <display-legacy>-Werte) werden aus Gründen der Rückwärtskompatibilität unterstützt.

Zum Beispiel können Sie mit zwei Werten einen Inline-Flex-Container wie folgt angeben:

.container {
  display: inline flex;
}

Dies kann auch mit dem vorab zusammengesetzten Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Leitfaden zur Verwendung der Multi-Keyword-Syntax mit CSS display.

Die einzelnen Seiten für die verschiedenen Typen von Werten, die auf display gesetzt werden können, enthalten zahlreiche Beispiele dieser Werte in Aktion – siehe den Syntaxabschnitt. Darüber hinaus finden Sie folgende Materialien, die die verschiedenen Werte von Display ausführlich behandeln.

• Verwendung der Multi-Keyword-Syntax mit CSS display

• Block- und Inline-Layout im normalen Fluss
• Flow-Layout und Überlauf
• Flow-Layout und Schreibmodi
• Erklärung von Formatierungskontexten
• Im Fluss und außerhalb des Flusses

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flexcontainer
• Steuern von Verhältnissen von Flex-Elementen entlang der Hauptachse
• Meistern des Umschlingens von Flex-Elementen
• Sortieren von Flex-Elementen
• Das Verhältnis von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle von Flexbox

• Grundkonzepte des Grid-Layouts
• Das Verhältnis zu anderen Layout-Methoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Gitterlinien
• Automatische Platzierung im Grid-Layout
• Box-Ausrichtung im Grid-Layout
• Gitter, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• CSS-Grid-Layout und progressive Verbesserung
• Verwirklichung häufiger Layouts mit Gittern

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten 50% beim Animieren zwischen den beiden flippen wird.

Es gibt eine Ausnahme, wenn zu oder von display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten flippen, so dass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wird der Wert bei 0% der Animationsdauer zu block flippen, so dass es während der gesamten Zeit sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wird der Wert bei 100% der Animationsdauer zu none flippen, so dass es während der gesamten Zeit sichtbar ist.

Dieses Verhalten ist nützlich, um Eintritts- und Austrittsanimationen zu erstellen, bei denen Sie z.B. einen Container aus dem DOM mit display: none entfernen möchten, aber möchten, dass er mit opacity ausblendet, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den Anfangs-display-Wert in einem expliziten Keyframe angeben (z.B. mit 0% oder from). Siehe Verwendung von CSS-Animationen für ein Beispiel.

Beim Animieren von display mit CSS-Übergängen sind zwei zusätzliche Funktionen erforderlich:

• @starting-style gibt Startwerte für Eigenschaften an, von denen Sie aus übertragen möchten, wenn das animierte Element erstmals angezeigt wird. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements ausgelöst oder wenn sich der display-Typ von none zu einem anderen Typ ändert.
• transition-behavior: allow-discrete muss auf der Deklaration transition-property (oder der Verkürzung transition) gesetzt werden, um display-Übergänge zu aktivieren.

Für Beispiele zur Umsetzung der display-Eigenschaft siehe die Seiten @starting-style und transition-behavior.

Die Verwendung eines display-Wertes von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies wird dazu führen, dass das Element und alle seine Nachkommenelemente von Bildschirmlesetechnologie nicht mehr angesagt werden.

Wenn Sie das Element visuell verbergen möchten, ist eine barrierefreiere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, es jedoch für unterstützende Technologien wie Bildschirmleser verfügbar zu machen.

Obwohl display: none den Inhalt aus dem Barrierefreiheitsbaum entfernt, werden Elemente, die versteckt, aber von sichtbaren Elementen in deren aria-describedby oder aria-labelledby Attributen referenziert werden, unterstützenden Technologien zugänglich gemacht.

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents aus dem Barrierefreiheitsbaum (aber die Nachkommen bleiben erhalten). Dies führt dazu, dass das Element selbst nicht mehr von Bildschirmlesetechnologie angesagt wird. Dies ist ein inkorrektes Verhalten gemäß der CSS-Spezifikation.

• Mehr barrierefreies Markup mit display: contents | Hidde de Vries
• Display: contents ist kein CSS-Reset | Adrian Roselli

In einigen Browsern verändert das Ändern des display-Wertes eines <table>-Elements zu block, grid oder flex seine Darstellung im Barrierefreiheitsbaum. Dies führt dazu, dass die Tabelle von Bildschirmlesetechnologie nicht mehr ordnungsgemäß angesagt wird.

• Kurze Notiz darüber, was die CSS-Display-Eigenschaften mit Tabellensemantik machen — The Paciello Group
• Versteckter Inhalt für bessere Barrierefreiheit | Go Make Things
• MDN Verständnis von WCAG, Leitlinien 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis WCAG 2.0

display = 
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  <display-outside> || [ <display-inside> | math ]  

<display-outside> = 
  block   |
  inline  |
  run-in  

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby       

<display-listitem> = 
  <display-outside>?     &&
  [ flow | flow-root ]?  &&
  list-item              

<display-internal> = 
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container  

<display-box> = 
  contents  |
  none      

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

In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, von denen jedes drei Inline-Kinder hat. Darunter befindet sich ein Auswahlelement, das es Ihnen ermöglicht, verschiedene display-Werte auf die Container anzuwenden, sodass Sie vergleichen und kontrastieren können, wie die verschiedenen Werte das Layout des Elements und das ihrer Kinder beeinflussen.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, sodass es leichter ist, den Effekt der Display-Werte zu sehen.

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>block flow</option>
    <option>inline</option>
    <option>inline flow</option>
    <option>flow</option>
    <option>flow-root</option>
    <option>block flow-root</option>
    <option>table</option>
    <option>block table</option>
    <option>flex</option>
    <option>block flex</option>
    <option>grid</option>
    <option>block grid</option>
    <option>list-item</option>
    <option>block flow list-item</option>
    <option>inline flow list-item</option>
    <option>block flow-root list-item</option>
    <option>inline flow-root list-item</option>
    <option>contents</option>
    <option>none</option>
    <option>inline-block</option>
    <option>inline flow-root</option>
    <option>inline-table</option>
    <option>inline table</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>inline-grid</option>
    <option>inline grid</option>
  </select>
</div>

CSS

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

JavaScript

const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();

Ergebnis

Beachten Sie, dass einige Multi-Keyword-Werte zur Illustration hinzugefügt wurden, die folgende Entsprechungen haben:

• block = block flow
• inline = inline flow
• flow = block flow
• flow-root = block flow-root
• table = block table
• flex = block flex
• grid = block grid
• list-item = block flow list-item
• inline-block = inline flow-root
• inline-table = inline table
• inline-flex = inline flex
• inline-grid = inline grid

Weitere Beispiele finden Sie auf den Seiten für jeden separaten Display-Typ unter Gruppierte Werte.

• Block- und Inline-Layout im normalen Fluss
• Einführung in Formatierungskontexte
• visibility, float, position
• grid, flex