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 display-Eigenschaft wird mit Schlüsselwortwerten angegeben.

Gruppierte Werte

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

Outside

<display-outside>

Diese Schlüsselwörter legen den äußeren Display-Typ des Elements fest, im Wesentlichen seine Rolle im Flusslayout:

block

Das Element generiert eine Block-Box, die sowohl vor als auch nach dem Element im normalen Flusszeilenumbrüche erzeugt.

inline

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

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

Inside

<display-inside>

Diese Schlüsselwörter geben den inneren Display-Typ des Elements an, der den Typ des Formatierungskontexts definiert, in dem seine Inhalte dargestellt werden (vorausgesetzt, es ist ein nicht ersetztes Element). Wenn eines dieser Schlüsselwörter als einzelner Wert verwendet wird, ist der äußere Display-Typ des Elements standardmäßig block (außer ruby, das standardmäßig inline ist).

flow

Das Element legt seine Inhalte im Flusslayout (Block-und-Inline-Layout) an.

Wenn sein äußerer Display-Typ inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, generiert es eine Inline-Box. Andernfalls generiert 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, stellt es entweder einen neuen Block-Formatierungskontext (BFC) für seine Inhalte her oder integriert seine Inhalte in seinen Eltern-Formatierungskontext.

flow-root

Das Element generiert eine Block-Box, die einen neuen Block-Formatierungskontext etabliert und 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 gemäß dem Flexbox-Modell an.

grid

Das Element verhält sich wie ein block-level Element und legt seine Inhalte gemäß dem Grid-Modell an.

grid-lanes

Das Element verhält sich wie ein block-level Element und legt seine Inhalte im Grid-Lanes-Layout an. Spalten werden durch grid-template-columns definiert und verhalten sich wie ein strenges Grid, während Elemente in der Blockrichtung verpackt werden, um Lücken zwischen Elementen unterschiedlicher Größe zu füllen. Siehe Grid-Lanes-Layout für Details.

inline-grid-lanes

Das Element verhält sich wie ein inline-level Element und legt seine Inhalte im Grid-Lanes-Layout an. Reihen werden durch grid-template-rows definiert und verhalten sich wie ein strenges Grid, während Elemente in der Inline-Richtung verpackt werden, um Lücken zwischen Elementen unterschiedlicher Größe zu füllen. Siehe Grid-Lanes-Layout für Details.

ruby

Das Element verhält sich wie ein inline-level Element und legt seine Inhalte gemäß dem Ruby-Formatierungsmodell an. Es verhält sich wie die entsprechenden HTML <ruby> Elemente.

List Item

<display-listitem>

Das Element generiert eine Block-Box für den Inhalt und eine separate Listenelement-Inline-Box.

Ein einzelner Wert von list-item führt dazu, dass sich das Element 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.

Internal

<display-internal>

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

table-row-group

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

table-header-group

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

table-footer-group

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

table-row

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

table-cell

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

table-column-group

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

table-column

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

table-caption

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

ruby-base

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

ruby-text

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

ruby-base-container

Diese Elemente werden als anonyme Boxen generiert.

ruby-text-container

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

Box

<display-box>

Diese Werte definieren, ob ein Element Anzeigeboxen generiert oder nicht.

contents

Diese Elemente erzeugen keine spezifische Box für sich. Sie werden durch ihre Pseudo-Box und ihre Kind-Boxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation definiert, wie der Wert contents "ungewöhnliche Elemente" beeinflussen sollte — Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Siehe Anhang B: Effekte von display: contents auf ungewöhnliche Elemente für weitere Details.

none

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

Precomposed

<display-legacy>

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

inline-block

Das Element generiert eine Block-Box, die zusammen mit dem umgebenden Inhalt geflossen wird, als ob sie eine einzelne Inline-Box wäre (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 statt als Blocklevel-Box. Innerhalb der Tabellenbox besteht ein Blocklevel-Kontext.

Es ist äquivalent zu inline table.

inline-flex

Das Element verhält sich wie ein inline-level Element und legt seine Inhalte gemäß dem Flexbox-Modell an.

Es ist äquivalent zu inline flex.

inline-grid

Das Element verhält sich wie ein inline-level Element und legt seine Inhalte gemäß dem Grid-Modell an.

Es ist äquivalent zu inline grid.

Welche Syntax sollten Sie verwenden?

Das CSS Display Module beschreibt eine Mehrwortsyntax für Werte, die Sie mit der display-Eigenschaft verwenden können, um den äußeren und inneren Display explizit zu definieren. Die Einzelwertsyntax (vorkomponierte <display-legacy>-Werte) wird zur Rückwärtskompatibilität unterstützt.

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

.container {
  display: inline flex;
}

Dies kann auch mit dem vorkomponierten Einzelwert spezifiziert werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Leitfaden zur Verwendung der Mehrwortsyntax mit CSS display.

Beschreibung

Die einzelnen Seiten für die verschiedenen Werttypen, die display gesetzt haben kann, enthalten mehrere Beispiele dieser Werte in Aktion — siehe den Syntax-Abschnitt. Darüber hinaus sehen Sie das folgende Material, das die verschiedenen Werte von Display eingehend behandelt.

Mehrwortwerte

• Verwendung der Mehrwortsyntax mit CSS display

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

• Block- und Inline-Layout im normalen Fluss
• Flusslayout und Überlauf
• Flusslayout und Schreibmodi
• Einführung in Formatierungskontexte
• Im Fluss und aus dem Fluss

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Steuern der Verhältnisse von Flex-Elementen entlang der Hauptachse
• Beherrschen des Umbruchs von Flex-Elementen
• Reihenfolge von Flex-Elementen
• Beziehung von Flexbox zu anderen Layoutmethoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte des Grid-Layouts
• Beziehung zu anderen Layoutmethoden
• Linienbasierte Platzierung
• Grid-Vorlagenbereiche
• Layout mit benannten Gitterlinien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Gitter, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Verwirklichung von gängigen Layouts mit Gitter
• Grid-Lanes-Layout

Animation von display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet im Allgemeinen, dass die Eigenschaft zwischen zwei Werten umschaltet, wenn sie 50 % der Animation zwischen den beiden erreicht.

Es gibt eine Ausnahme, wenn display: none hin zu oder von block animiert wird. In diesem Fall wird der Wert so umgeschaltet, dass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird. Zum Beispiel:

• Wenn display von none auf block (oder einen anderen sichtbaren display-Wert) animiert wird, schaltet der Wert bei 0% der Animationsdauer auf block, damit er während der gesamten Dauer sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) auf none animiert wird, schaltet der Wert bei 100% der Animationsdauer auf none, damit er während der gesamten Dauer sichtbar ist.

Dieses Verhalten ist nützlich zum Erstellen von Ein- / Ausstiegsanimationen, bei denen Sie z.B. einen Container aus dem DOM mit display: none entfernen möchten, aber mit opacity ausblenden, anstatt sofort zu verschwinden.

Wenn Sie display mit CSS-Animationen animieren, müssen Sie den startenden display-Wert in einem expliziten Keyframe angeben (zum Beispiel mit 0% oder from). Ein Beispiel finden Sie unter Verwenden von CSS-Animationen.

Wenn Sie display mit CSS-Übergängen animieren, sind zwei zusätzliche Funktionen erforderlich:

• @starting-style bietet Startwerte für Eigenschaften, von denen Sie beim ersten Anzeigen des animierten Elements aus übergehen möchten. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge beim ersten Stil-Update eines Elements oder beim Ändern des display-Typs von none zu einem anderen Typ nicht ausgelöst.
• transition-behavior: allow-discrete muss bei der transition-property Deklaration (oder beim transition Shorthand) gesetzt werden, um display-Übergänge zu ermöglichen.

Beispiele für das Übergehen der display-Eigenschaft finden Sie auf den 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. Dadurch wird das Element und alle seine Nachkommen von Screen-Reader-Technologie nicht mehr angekündigt.

Wenn Sie das Element visuell ausblenden möchten, ist eine zugänglichere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, aber für unterstützende Technologien wie Screen-Reader verfügbar zu machen.

Während display: none Inhalte aus dem Zugänglichkeitsbaum ausblendet, werden Elemente, die versteckt sind, aber von sichtbaren Elementen über aria-describedby oder aria-labelledby Attribute referenziert werden, unterstützenden Technologien zugänglich gemacht.

display: contents

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

• Barrierefreieres Markup mit display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

Tabellen

In einigen Browsern wird das Ändern des display-Werts eines <table>-Elements auf block, grid, oder flex seine Darstellung im Zugänglichkeitsbaum ändern. Dies führt dazu, dass die Tabelle nicht mehr richtig von Screen-Reader-Technologie angekündigt wird.

• Versteckte Inhalte für bessere Zugänglichkeit | Go Make Things
• MDN Verständnis der WCAG, Leitlinie 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Understanding 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-Container-Elemente, jedes mit drei Inline-Kindern. Darunter haben wir ein Auswahlmenü, das es Ihnen ermöglicht, verschiedene display-Werte auf die Container anzuwenden, damit Sie vergleichen und einen Eindruck bekommen, wie die verschiedenen Werte das Layout des Elements beeinflussen und das ihrer Kinder.

Wir haben padding und background-color auf die Container und ihre Kinder angewendet, damit es einfacher zu sehen ist, welchen Effekt die display-Werte haben.

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 Mehrwortwerte zur Veranschaulichung hinzugefügt sind, 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 separaten Display-Typ unter Gruppierte Werte.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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