display CSS property

Probieren Sie es aus

display: block;

display: inline flow-root;

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

/* short display */
display: none;
display: contents;
display: block;
display: flow-root;
display: inline;
display: inline-block;
display: list-item;
display: inline list-item;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: grid-lanes;
display: inline-grid-lanes;
display: table;
display: inline-table;

/* full display */
display: block flow;
display: block flow-root;
display: inline flow;
display: inline flow-root;
display: block flow list-item;
display: inline flow list-item;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block table;
display: inline table;

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

Die CSS-Eigenschaft display wird durch Schlüsselwortwerte angegeben.

Gruppierte Werte

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

Außen

<display-outside>

Diese Schlüsselwörter spezifizieren den äußeren Anzeigetyp des Elements, was im Wesentlichen seine Rolle im Flusslayout ist:

block

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

Innen

<display-inside>

Diese Schlüsselwörter spezifizieren den inneren Anzeigetyp des Elements, der den Typ des Formatierungskontexts definiert, in dem seine Inhalte angeordnet werden (vorausgesetzt, es ist ein nicht-ersetztes Element). Wenn eines dieser Schlüsselwörter alleine als Einzelwert verwendet wird, hat der äußere Anzeigetyp des Elements standardmäßig den Wert block (mit Ausnahme von ruby, das standardmäßig inline ist).

flow

Das Element ordnet seine Inhalte mithilfe des Flusslayouts (Block-und-Inline-Layout).

Wenn sein äußerer Anzeigetyp inline ist und es in einem Block- oder Inline-Formatierungskontext teilnimmt, dann erzeugt es eine Inline-Box. Ansonsten erzeugt es eine Block-Box.

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 Block-Formatierungskontext (BFC) für seine Inhalte oder integriert seine Inhalte in seinen übergeordneten Formatierungskontext.

flow-root

Das Element erzeugt eine Block-Box, die einen neuen Block-Formatierungskontext etabliert, der den Formatierungsursprung definiert.

table

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

flex

Das Element verhält sich wie ein Block-Level-Element und ordnet seine Inhalte nach dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein Block-Level-Element und ordnet seine Inhalte nach dem Grid-Modell an.

grid-lanes

Das Element verhält sich wie ein Block-Level-Element und ordnet seine Inhalte unter Verwendung von Masonry-Layout an. Spalten werden durch grid-template-columns definiert und verhalten sich wie ein striktes Gitter, während Elemente in Blockrichtung gepackt werden, um Lücken zwischen unterschiedlich großen Elementen zu füllen. Einzelheiten siehe Masonry-Layout.

inline-grid-lanes

Das Element verhält sich wie ein Inline-Level-Element und ordnet seine Inhalte unter Verwendung von Masonry-Layout an. Zeilen werden durch grid-template-rows definiert und verhalten sich wie ein striktes Raster, während Elemente in Inline-Richtung gepackt werden, um Lücken zwischen unterschiedlich großen Elementen zu füllen. Einzelheiten siehe Masonry-Layout.

ruby

Das Element verhält sich wie ein Inline-Level-Element und ordnet seine Inhalte nach dem Ruby-Formatierungsmodell an. Es verhält sich wie das entsprechende HTML-Element <ruby>.

Listenelement

<display-listitem>

Das Element erzeugt eine Block-Box für den Inhalt und eine separate Inline-Box für Listenelemente.

Ein einzelner Wert von list-item wird dazu führen, dass das Element sich wie ein Listenelement verhält. 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.

Intern

<display-internal>

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

table-row-group

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

table-header-group

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

table-footer-group

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

table-row

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

table-cell

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

table-column-group

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

table-column

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

table-caption

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

ruby-base

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

ruby-text

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

ruby-base-container

Diese Elemente werden als anonyme Boxen generiert.

ruby-text-container

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

Box

<display-box>

Diese Werte definieren, ob ein Element überhaupt Darstellungsboxen 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-Box-Konzepte gerendert werden, wie ersetzte Elemente. Einzelheiten siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente.

none

Schaltet die Darstellung eines Elements aus, sodass es keine Auswirkungen auf das Layout hat (das Dokument wird so gerendert, als ob das Element nicht existieren würde). Alle Nachkommen-Elemente haben ebenfalls ihre Darstellung ausgeschaltet. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, jedoch ohne tatsächlich etwas zu rendern, verwenden Sie stattdessen die Eigenschaft visibility.

Vorformuliert

<display-legacy>

CSS 2 verwendete eine Single-Keyword, vorformulierte 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 dem umgebenden Inhalt als würde es sich um eine einzelne Inline-Box handeln, geflossen wird (es verhält sich ähnlich wie ein ersetztes Element).

Es ist äquivalent zu inline flow-root.

inline-table

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

Es ist äquivalent zu inline table.

inline-flex

Das Element verhält sich wie ein Inline-Level-Element und ordnet seine Inhalte nach dem Flexbox-Modell an.

Es ist äquivalent zu inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Level-Element und ordnet seine Inhalte nach dem Grid-Modell an.

Es ist äquivalent zu inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS-Display-Modul beschreibt eine Mehrfach-Schlüsselwort-Syntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um den äußeren und inneren Anzeigetyp explizit zu definieren. Die Einzel-Schlüsselwort-Werte (vorgefertigte <display-legacy>-Werte) werden aus Gründen der Abwä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 klassischen Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Für weitere Informationen zu diesen Änderungen siehe den Anleitung zur Verwendung der Mehrfach-Schlüsselwort-Syntax mit CSS display.

Beschreibung

Die einzelnen Seiten für die verschiedenen Typen von Werten, die display annehmen kann, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Abschnitt Syntax. Außerdem sehen Sie sich das folgende Material an, das die verschiedenen Werte von display ausführlich behandelt.

Mehrfach-Schlüsselwort-Werte

• Verwendung der Mehrfach-Schlüsselwort-Syntax mit CSS display

CSS-Flusslayout (display: block, display: inline)

• Block- und Inline-Layout im normalen Fluss
• Flusslayout und Überlauf
• Flusslayout und Schreibmodi
• Einführung in Formatierungskontexte
• Im Fluss und außerhalb des Flusses

display: flex

• Grundkonzepte von Flexbox
• Ausrichtung von Elementen im Flex-Container
• Steuerung der Verhältnisse von Flex-Einheiten entlang der Hauptachse
• Meisterung des Umbruchs von Flex-Einheiten
• Bestellung von Flex-Einheiten
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Zeilenbasierte Platzierung
• Grid-Template-Bereiche
• Layout unter Verwendung benannter Grid-Linien
• Automatische Platzierung im Grid-Layout
• Ausrichtung von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Häufige Layouts mit Grids umsetzen
• Masonry-Layout

Animation von Display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft 50% der Animation zwischen den beiden Werten hin und her wechselt.

Es gibt eine Ausnahme, wenn zu oder von display: none animiert wird. In diesem Fall wird der Browser zwischen den beiden Werten wechseln, sodass der animierte Inhalt für die gesamte Animationsdauer angezeigt wird. Beispielsweise:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wechselt der Wert bei 0% der Animationsdauer zu block, um während der gesamten Animation sichtbar zu sein.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert bei 100% der Animationsdauer zu none, um während der gesamten Animation sichtbar zu sein.

Dieses Verhalten ist nützlich für das Erstellen von Ein- und Austrittsanimationen, bei denen Sie z.B. einen Container mit display: none aus dem DOM entfernen möchten, aber er soll mit opacity ausgeblendet werden, anstatt sofort zu verschwinden.

Wenn Sie display mit CSS-Animationen animieren, müssen Sie den Startwert display 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 stellt Startwerte für Eigenschaften bereit, von denen Sie bei der ersten Anzeige des animierten Elements übergehen möchten. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge nicht bei der ersten Stilaktualisierung eines Elements oder wenn sich der display-Typ von none zu einem anderen Typ ändert, ausgelöst.
• transition-behavior: allow-discrete muss in der transition-property-Deklaration (oder der transition-Kurzform) gesetzt werden, um display-Übergänge zu ermöglichen.

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

Barrierefreiheit

display: none

Die Verwendung eines display-Wertes von none auf einem Element entfernt dieses aus dem Barrierefreiheitsbaum. Dies führt dazu, dass das Element und alle seine Unterelemente nicht mehr von Bildschirmlesetechnologien angekündigt werden.

Wenn Sie das Element visuell ausblenden möchten, ist eine barrierefreiere Alternative die Verwendung einer Kombination von Eigenschaften, um es visuell vom Bildschirm zu entfernen, es jedoch dennoch für assistive Technologien wie Bildschirmleser verfügbar zu machen.

Während display: none Inhalte aus dem Barrierefreiheitsbaum ausblendet, werden Elemente, die versteckt sind, aber von sichtbaren Elementen durch aria-describedby oder aria-labelledby Attribute referenziert werden, assistiven Technologien zugänglich gemacht.

display: contents

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

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

Tabellen

In einigen Browsern ä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 nicht mehr korrekt von Bildschirmlesetechnologien angekündigt wird.

• Versteckte Inhalte für bessere Barrierefreiheit | Go Make Things
• MDN Verständnis von WCAG, Richtlinie 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis von WCAG 2.0

Formale Definition

Formale Syntax

display = 
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  grid-lanes                                        |
  inline-grid-lanes                                 |
  <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

Vergleich von Display-Werten

In diesem Beispiel haben wir zwei Block-Level-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, mit dem Sie unterschiedliche display-Werte auf die Container anwenden können, um zu vergleichen und gegenüberzustellen, wie die unterschiedlichen Werte das Layout des Elements und das seiner Kinder beeinflussen.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher ist, die Wirkung der Anzeige-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 Mehrfache-Schlüsselwort-Werte zur Veranschaulichung hinzugefügt wurden, die folgende Äquivalente 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 Anzeige-Typ unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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