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

Gruppierte Werte

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

Outside

<display-outside>

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

block

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

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 auf derselben 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 Formatierungskontext definiert, in dem der Inhalt eines nicht-erstzenden Elements layoutiert wird. Wenn eines dieser Schlüsselwörter allein als Einzelwert 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 layoutiert seine Inhalte unter Verwendung des Flow-Layouts (Block-und-Inline-Layout).

Wenn sein äußerer Display-Typ inline ist und es an einem Block- oder Inline-Formatierungskontext teilnimmt, erzeugt es eine Inline-Box. Andernfalls erzeugt 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 Block-Formatierungskontext (BFC) für seinen Inhalt oder integriert seinen Inhalt in den Formatierungskontext des übergeordneten Elements.

flow-root

Das Element erzeugt eine Blockbox, 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-Box.

flex

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

grid

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

ruby

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

List Item

<display-listitem>

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

Ein einzelner Wert von list-item bewirkt, 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 verschiedenen Rollen, die ihre Kinder und Nachkommen erfüllen können. Diese Sektion definiert die "internen" Display-Werte, die nur innerhalb dieses speziellen Layout-Modus 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 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 festlegt, wie der contents-Wert "ungewöhnliche Elemente" beeinflussen sollte — Elemente, die nicht rein durch CSS-Box-Konzept gerendert 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 so gerendert, als ob das Element nicht existiert). Alle Nachkommen-Elemente haben auch ihre Anzeige 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 visibility-Eigenschaft.

Precomposed

<display-legacy>

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

inline-block

Das Element erzeugt eine Blockbox, die mit umgebendem Inhalt geflossen wird, als ob es 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 anstelle einer Block-Box. Innerhalb der Tabellen-Box befindet sich ein Blockkontext.

Es ist äquivalent zu inline table.

inline-flex

Das Element verhält sich wie ein Inline-Element und layoutiert seinen Inhalt gemäß dem Flexbox-Modell.

Es ist äquivalent zu inline flex.

inline-grid

Das Element verhält sich wie ein Inline-Element und layoutiert seinen Inhalt gemäß dem Grid-Modell.

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 äußere und innere Anzeige explizit zu definieren. Die Einzelschlüsselwertwerte (vorkomponierte <display-legacy>-Werte) werden für die Rückwärtskompatibilität unterstützt.

Zum Beispiel, indem zwei Werte verwendet werden, können Sie einen Inline-Flex-Container wie folgt angeben:

.container {
  display: inline flex;
}

Dies kann auch mit dem veralteten Einzelwert angegeben werden:

.container {
  display: inline-flex;
}

Weitere Informationen zu diesen Änderungen finden Sie im Verwendung der Mehrfach-Schlüsselwort-Syntax mit CSS display-Leitfaden.

Beschreibung

Die einzelnen Seiten für die verschiedenen Werttypen, die display haben kann, enthalten mehrere Beispiele für diese Werte in Aktion — siehe den Syntax-Abschnitt. Zudem sehen Sie die folgenden Materialien, die die verschiedenen Werte von Display ausführlich behandeln.

Mehrfach-Schlüsselwort-Werte

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

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

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

display: flex

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Kontrollieren von Verhältnissen von Flex-Elementen entlang der Hauptachse
• Meistern des Umbruchs von Flex-Elementen
• Bestellung von Flex-Elementen
• Beziehung von Flexbox zu anderen Layout-Methoden
• Typische Anwendungsfälle von Flexbox

display: grid

• Grundkonzepte von Grid-Layout
• Beziehung zu anderen Layout-Methoden
• Linienbasierte Platzierung
• Grid-Template-Bereiche
• Layout mit benannten Grid-Linien
• Automatische Platzierung im Grid-Layout
• Ausrichten von Elementen im CSS-Grid-Layout
• Grids, logische Werte und Schreibmodi
• CSS-Grid-Layout und Barrierefreiheit
• Umsetzung häufiger Layouts mit Grids

Animierung von display

Unterstützende Browser animieren display mit einem diskreten Animationstyp. Dies bedeutet in der Regel, dass die Eigenschaft während der Hälfte der Animation zwischen zwei Werten wechselt.

Es gibt eine Ausnahme, nämlich beim Animieren zu oder von display: none. In diesem Fall wird der Browser zwischen den beiden Werten wechseln, sodass der animierte Inhalt über die gesamte Animationsdauer angezeigt wird. Zum Beispiel:

• Beim Animieren von display von none zu block (oder einem anderen sichtbaren display-Wert) wird der Wert zu block bei 0% der Animationsdauer umgeschaltet, sodass er während der gesamten Zeit sichtbar ist.
• Beim Animieren von display von block (oder einem anderen sichtbaren display-Wert) zu none wird der Wert bei 100% der Animationsdauer auf none umgeschaltet, sodass er während der gesamten Zeit sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Ausblendeffekte zu erzeugen, bei denen Sie beispielsweise einen Container aus dem DOM mit display: none entfernen möchten, aber diesen mit opacity ausblenden, anstatt sofort zu verschwinden.

Beim Animieren von display mit CSS-Animationen müssen Sie den startenden display-Wert 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 liefert Startwerte für Eigenschaften, von denen Sie überblenden möchten, wenn das animierte Element zuerst angezeigt wird. Dies ist erforderlich, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden CSS-Übergänge bei der ersten Stilaktualisierung 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 dem transition-Kurzschriftsatz) gesetzt werden, um display-Übergänge zu ermöglichen.

Für Beispiele für das Übergang des display-Eigenschaft, siehe die Seiten zu @starting-style und transition-behavior.

Barrierefreiheit

display: none

Die Verwendung eines display-Werts von none auf einem Element entfernt es aus dem Barrierefreiheitsbaum. Dies führt dazu, dass das Element und all seine Nachkommen nicht mehr von Screenreader-Technologie angesagt werden.

Wenn Sie das Element visuell ausblenden möchten, ist eine barrierefreiere Alternative, eine Kombination von Eigenschaften zu verwenden, um es visuell vom Bildschirm zu entfernen, aber es dennoch für unterstützende Technologie wie Screenreader bereitzustellen.

Während display: none Inhalte im Barrierefreiheitsbaum versteckt, werden Elemente, die versteckt sind, aber von sichtbaren Elementen aria-describedby oder aria-labelledby-Attribute referenziert werden, unterstützenden Technologien zur Verfügung gestellt.

display: contents

Gegenwärtige Implementierungen in einigen Browsern entfernen aus dem Barrierefreiheitsbaum jedes Element mit einem display-Wert von contents (aber Nachfahren bleiben bestehen). Dies führt dazu, dass das Element selbst nicht mehr von Screenreader-Technologie angesagt wird. Dies ist ein fehlerhaftes Verhalten gemäß der CSS-Spezifikation.

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

Tabellen

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

• Kurze Notiz darüber, was CSS-Display-Eigenschaften mit Tabellensemantik machen — Die Paciello-Gruppe
• Verborgener Inhalt für bessere Barrierefreiheit | 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>                                  |
  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, von denen jedes drei Inline-Kinder hat. Darunter haben wir ein Auswahlmenü, das Ihnen erlaubt, verschiedene display-Werte auf die Container anzuwenden, sodass Sie vergleichen und gegenüberstellen können, wie die verschiedenen 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 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 Mehrfach-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 separaten 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