display

Probieren Sie es aus

display: block;

display: inline-block;

display: none;

display: flex;

display: grid;

<p>
  Apply different <code>display</code> values on the dashed orange-bordered
  <code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
  <div class="example-container">
    Some text A.
    <div id="example-element">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
    </div>
    Some text B.
  </div>
</section>

.example-container {
  width: 100%;
  height: 100%;
}

code {
  background: #88888888;
}

#example-element {
  border: 3px dashed orange;
}

.child {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #ccccff;
  border: 1px solid #ababab;
  color: black;
}

Syntax

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

/* Box suppression */
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 mithilfe von Schlüsselwortwerten spezifiziert.

Gruppierte Werte

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

Outside

<display-outside>

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

block

Das Element erzeugt eine Block-Box und erzeugt Zeilenumbrüche sowohl vor als auch nach dem Element, 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 Platz vorhanden ist.

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

Inside

<display-inside>

Diese Schlüsselwörter bestimmen den inneren Display-Typ des Elements, der die Art des Formatierungskontextes definiert, in dem seine Inhalte gespeichert sind (vorausgesetzt, es ist ein nicht-ersetztes Element). Wenn eines dieser Schlüsselwörter alleine als einzelner Wert verwendet wird, wird der äußere Display-Typ des Elements standardmäßig auf block gesetzt (mit Ausnahme von ruby, das standardmäßig inline ist).

flow

Das Element legt seine Inhalte mithilfe des Flow-Layouts (Block-und-Inline-Layout) aus.

Wenn der äußere Display-Typ inline ist und das Element an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es eine Inline-Box. Andernfalls erzeugt es eine Block-Box.

Abhängig vom Wert anderer Eigenschaften (wie position, float oder overflow) und davon, ob es selbst an einem Block- oder Inline-Formatierungskontext teilnimmt, wird entweder ein neuer Block-Formatierungskontext (BFC) für seine Inhalte geschaffen oder seine Inhalte in den Formatierungskontext des übergeordneten Elements integriert.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext schafft, der festlegt, wo die Formatierungswurzel liegt.

table

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

flex

Das Element verhält sich wie ein Block-Level-Element und legt seine Inhalte entsprechend dem Flexbox-Modell aus.

grid

Das Element verhält sich wie ein Block-Level-Element und legt seine Inhalte entsprechend dem Grid-Modell aus.

ruby

Das Element verhält sich wie ein Inline-Level-Element und legt seine Inhalte entsprechend dem Ruby-Formatierungsmodell aus. Es verhält sich wie die entsprechenden HTML-<ruby>-Elemente.

Listenelement

<display-listitem>

Das Element erzeugt eine Block-Box für den Inhalt und eine separate Listenpunkt-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 den flow- oder flow-root-<display-inside>-Schlüsselwörtern kombiniert werden.

Internal

<display-internal>

Einige Layoutmodelle wie table und ruby haben eine komplexe interne Struktur, mit mehreren verschiedenen Rollen, die ihre Kinder und Nachfahren ausfüllen können. Dieser Abschnitt definiert diese "internen" Anzeige-Werte, die nur in diesem bestimmten Layoutmodus 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.

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Anzeigeboxen generiert.

contents

Diese Elemente erzeugen keine spezifische Box durch sich selbst. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Beachten Sie bitte, 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 gerendert werden, wie ersetzte Elemente. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für mehr 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 existieren würde). Alle Nachkommelemente haben auch ihre Anzeige ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, ohne tatsächlich etwas zu rendern, benutzen Sie stattdessen die visibility-Eigenschaft.

Vorgefertigt

<display-legacy>

CSS 2 verwendete eine Ein-Schlüsselwort-vorgefertigte Syntax für die display-Eigenschaft, die separate Schlüsselwörter für Block-Level- und Inline-Level-Varianten des gleichen Layout-Modus erforderte.

inline-block

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

Es entspricht inline flow-root.

inline-table

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

Es entspricht inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-Element und legt seine Inhalte entsprechend dem Flexbox-Modell aus.

Es entspricht inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und legt seine Inhalte entsprechend dem Grid-Modell aus.

Es entspricht inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS-Anzeigemodul beschreibt eine Syntax mit mehreren Schlüsselwörtern für Werte, die Sie mit der display-Eigenschaft verwenden können, um äußere und innere Anzeige explizit zu definieren. Die Ein-Schlüsselwort-Werte (vorgefertigte <display-legacy>-Werte) werden zur Rückwärtskompatibilität unterstützt.

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

.container {
  display: inline flex;
}

Dies kann auch mit dem alten Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Für weitere Informationen über diese Änderungen siehe Verwendung der Syntax mit mehreren Schlüsselwörtern mit CSS Display.

Beschreibung

Die individuellen Seiten für die verschiedenen Werttypen, die display annehmen kann, beinhalten mehrere Beispiele dieser Werte in Aktion – siehe den Abschnitt Syntax. Außerdem beachten Sie das folgende Material, das die verschiedenen Werte von display ausführlich behandelt.

Mehrfach-Schlüsselwort-Werte

• Verwendung der Syntax mit mehreren Schlüsselwörtern mit CSS Display

CSS-Flow-Layout (display: block, display: inline)

• Block- und Inline-Layout im normalen Fluss
• Flow-Layout und Overflow
• Flow-Layout und Schreibrichtungen
• Einführung in Formatierungskontexte
• Im Fluss und aus dem Fluss

display: flex

• Grundkonzepte von Flexbox
• Ausrichtung von Elementen in einem Flex-Container
• Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschung des Umbruchs von Flex-Elementen
• Reihenfolge der Flex-Elemente
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Titelbereiche
• Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Ausrichtung von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibrichtungen
• CSS-Grid-Layout und Zugänglichkeit
• Verwirklichung gängiger Layouts mit Grids

Animieren von Display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Das bedeutet generell, dass die Eigenschaft während der Animation zwischen zwei Werten bei 50% wechselt.

Eine Ausnahme besteht, wenn zwischen display: none und einem anderen Wert animiert wird. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass 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, wechselt der Wert zu block bei 0% der Animationsdauer, sodass er die gesamte Dauer sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert zu none bei 100% der Animationsdauer, sodass er die gesamte Dauer sichtbar ist.

Dieses Verhalten ist nützlich, um Ein- und Ausstiegsanimationen zu erstellen, bei denen Sie zum Beispiel einen Container mit display: none aus dem DOM entfernen möchten, aber diesen mit opacity ausblenden lassen, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den Ausgangswert von display in einem expliziten Keyframe angeben (zum Beispiel 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 bietet Startwerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements übergehen möchten. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge durch ein erstes Stil-Update eines Elements oder wenn sich der display-Typ von none zu einem anderen Typ ändert, nicht ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder im transition-Shorthand) festgelegt werden, um display-Übergänge zu aktivieren.

Für Beispiele zum Übergang der display-Eigenschaft siehe die Seiten @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none bei einem Element entfernt es aus dem Zugänglichkeitsbaum. Dies führt dazu, dass das Element und alle seine Nachfahr-Elemente nicht mehr von Bildschirmlesetechnologien angekündigt werden.

Wenn Sie das Element visuell verstecken möchten, ist eine zugänglichere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, es aber weiterhin für unterstützende Technologien wie Bildschirmleser zugänglich zu machen.

Obwohl display: none Inhalte aus dem Zugänglichkeitsbaum versteckt, werden Elemente, die versteckt sind, aber von sichtbaren Elementen durch aria-describedby oder aria-labelledby Attribute referenziert werden, für unterstützende Technologien zugänglich gemacht.

display: contents

Aktuelle Implementierungen in einigen Browsern entfernen jedes Element mit einem display-Wert von contents aus dem Zugänglichkeitsbaum (aber Nachkommen bleiben bestehen). Dies führt dazu, dass das Element selbst nicht mehr von Bildschirmlesetechnologien angekündigt wird. Dies ist inkorrektes Verhalten gemäß der CSS-Spezifikation.

• Zugänglicheres Markup mit display: contents | Hidde de Vries
• Display: Contents ist kein CSS-Reset | Adrian Roselli

Tabellen

In einigen Browsern führt eine Änderung des display-Werts eines <table>-Elements zu block, grid oder flex dazu, dass deren Darstellung im Zugänglichkeitsbaum verändert wird. Dies führt dazu, dass die Tabelle nicht mehr korrekt von Bildschirmlesetechnologien angekündigt wird.

• Kurze Notiz darüber, was CSS-Display-Eigenschaften mit Tabellensemantik machen — The Paciello Group
• Verborgene Inhalte für bessere A11Y | Go Make Things
• MDN Verständnis der WCAG, Richtlinie 1.3-Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis der WCAG 2.0

Formale Definition

Formale Syntax

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   

Beispiele

Anzeige-Wert-Vergleich

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

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, die Auswirkungen der Anzeigewerte 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 Mehrfach-Schlüsselwort-Werte zur Veranschaulichung 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 einzelnen Display-Typ unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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