Elemente ein- und ausblenden,
über- und nebeneinander anordnen
und das Layout der Kind-Elemente stark beeinflussen.

Grundlagen

Hinweis: Die Funktion der Werte BLOCK, INLINE-BLOCK und INLINE sowie NONE ist die wesentliche Grundlage und die häufigste Anwendung. Die Werte BLOCK und INLINE sind per CSS Standard jeweils den HTML Elementen zugeordnet. Dieser CSS-Standard kann jedoch von uns geändert werden.

Wichtige Werte für Display:

WerteBedeutung
none;Das Element wird nicht angezeigt und ist praktisch nicht da. Es hat keine Auswirkungen auf das Layout. Das ist der Unterschied zu OPACITY: 0 (Deckkraft: 0) und VISIBILITY: HIDDEN. Diese beiden machen das Element transparent. Ein transparenter Link ist aber z.B. Immer noch klickbar. Transparenter Text ist auch auszahlbar. Mit display: NONE ist der Link hingegen nicht im Browser. Im HTML-Quelltext der Seite wird der Inhalt auf jeden Fall aufgeführt. NONE kann gut genutzt werden um z.B. Inhalte auszublenden die bei anderen Zuständen (:hover, media-querie etc.) eingeblendet werden.
inline;Das Element kann keine Breite und Höhe haben sondern übernimmt diese Werte von seinem Inhalt. Es erzwingt keine neue Zeile. Ist Standard bei SPAN und wird benutzt um z.B. Wörter in einem Absatz anders zu gestalten. Es entspricht einen Zeichenformat in InDesign.
block;Das Element kann Breite und Höhe, Innenabstand und Aussenabstand (Boxmodell) haben. Es erzwingt eine neue Zeile. Die meisten HTML Elemente haben display: BLOCK als Standard. Z.B. H1 bis H6, P oder LI usw.
inline-block;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben.(Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
list-item;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben (Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
inline-list-item;Verhält sich wie LIST-ITEM. Der Inhalt wird jedoch unter dem Aufzählungszeichen umbrochen und nicht unter dem Anfang des Textes.
inherit;Das Element erbt (INHERIT) den Display-Wert von seinem Eltern-Element
initial;Die Display Eigenschaft wird auf den initialen Standard zurückgesetzt.

Display: NONE und Animation

Hinweis: Wird der Wert bei Display: NONE geändert können damit auch Animationen gestartet werden. In Kombination mit der Pseudoclass :hover werden über dieses Prinzip häufig Submenus in Naviagtionen erstellt.

Wichtige Werte für Display:

WerteBedeutung
none;Das Element wird nicht angezeigt und ist praktisch nicht da. Es hat keine Auswirkungen auf das Layout. Das ist der Unterschied zu OPACITY: 0 (Deckkraft: 0) und VISIBILITY: HIDDEN. Diese beiden machen das Element transparent. Ein transparenter Link ist aber z.B. Immer noch klickbar. Transparenter Text ist auch auszahlbar. Mit display: NONE ist der Link hingegen nicht im Browser. Im HTML-Quelltext der Seite wird der Inhalt auf jeden Fall aufgeführt. NONE kann gut genutzt werden um z.B. Inhalte auszublenden die bei anderen Zuständen (:hover, media-querie etc.) eingeblendet werden.
inline;Das Element kann keine Breite und Höhe haben sondern übernimmt diese Werte von seinem Inhalt. Es erzwingt keine neue Zeile. Ist Standard bei SPAN und wird benutzt um z.B. Wörter in einem Absatz anders zu gestalten. Es entspricht einen Zeichenformat in InDesign.
block;Das Element kann Breite und Höhe, Innenabstand und Aussenabstand (Boxmodell) haben. Es erzwingt eine neue Zeile. Die meisten HTML Elemente haben display: BLOCK als Standard. Z.B. H1 bis H6, P oder LI usw.
inline-block;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben.(Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
list-item;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben (Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
inline-list-item;Verhält sich wie LIST-ITEM. Der Inhalt wird jedoch unter dem Aufzählungszeichen umbrochen und nicht unter dem Anfang des Textes.
inherit;Das Element erbt (INHERIT) den Display-Wert von seinem Eltern-Element
initial;Die Display Eigenschaft wird auf den initialen Standard zurückgesetzt.

Display: FLEX

Hinweis: Mit display: FLEX und wenigen ergänzenden Eigenschaften können Elemente leicht ausgerichtet werden. Besonders das Zentrieren fällt gegenüber anderen Ansätzen leicht. Allerdings sind die Vendor-Prefixe noch zu beachten. Sonst ist die Unterstützung sehr Gut. Wir haben bei CODE übrigens noch zwei Seiten mit sehr ausführlichen Inhalten zu FLEX.

Display: FLEX

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

Ergänzende Eigenschaften

CSSBedeutungWerte
flex-direction:Positionierung der Kinder entweder auf einer Zeile nebeneinander oder als Säule übereinander. Die FLEX-DIRECTION hat Auswirkungen auf die Eigenschaften. Bei ROW entspricht die Hauptachse der X-Achse. Bei COLUMN entspricht die Hauptachse der Y-Achse. row; column; row-reverse; column-reverse;
flex-wrap:Erlaubt oder Verbietet den Umbruch in neue Zeile(n) (ROW) bzw. weitere Säulen (COLUMN.)nowrap; wrap; wrap-reverse;
flex-flow:Praktische Kurzschrift für eine Kombination der Werte von FLEX-DIRECTION und FLEX-WRAP.z.B. row wrap-reverse;
justify-content:Ausrichtung der Kinder auf der Hauptachse. Das ist bei ROW die X-Achse und bei COLUMN die Y-Achse.flex-start; flex-end; center; space-between; space-around;
align-items:Ausrichtung der Anfangszeile der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; baseline; stretch;
align-content:Ausrichtung des Zwischenraum der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; space-between; space-around; stretch;

Display: TABLE

Hinweis: Einige Elemente lassen sich scheinbar nicht in ihrer Position beeinflussen. So erscheint die CAPTION im hier gezeigten Beispiel oberhalb, obwohl sie im HTML unterhalb der anderen Inhalte steht. Dies liegt an den jeweiligen CSS Standard Einstellungen von Display. Eine Anpassung der Standard Regeln kann bei Responsiven Design eine Rolle spielen, z.B. wenn auf einem Smartphone aus Spalten Zeilen werden.

Tabellenbezogene Werte für Display:

WerteBedeutung
table;Das Element verhält sich wie TABLE. Es kann tabellenbezogene Inhalte, z.B. TBODY, TR, TD etc., haben. Es verhält sich wie ein Block-Element.
inline-table;Hat kein entsprechendes HTML Element. Verhält sich wie display: TABLE, aber ist ein INLINE Element und erzwingt somit keine neue Zeile.
table-caption;Entspricht Element CAPTION. Richtet innerhalb einer Tabelle die Beschreibung oberhalb der Tabelle aus.
table-cell;Entspricht dem Element TD. Einzelne Zelle innerhalb einer ZEILE (TR).
table-footer-group;Entspricht dem Element TFOOT. Fußzeile der Tabelle. Immer letztes Kind-Element von TABLE.
table-header-group;Entspricht dem Element THEAD. Kopfzeile der Tabelle. Immer erstes Kind-Element von TABLE.
table-row;Entspricht dem Element TR. Zeile (Table-Row) in THEAD, TBODY, TFOOT. Enthält die TD.
table-row-group;Entspricht dem Element TBODY. Hauptteil der Tabelle. Unterhalb von THEAD und oberhalb on TFOOT.

Display: GRID und die Zukunft ...

Hinweis: Leider werden die experimentellen Werte noch nicht wirklich unterstützt. So funktioniert das GRID System z.B. nur mit dem 80kb Javascript Polyfill in allen Browsern. Es werden noch einige Jahre vergehen bis damit gearbeitet werden kann. Das finde ich Schade. Bei Display: Flex ist die Zeit aber auch rumgegangen. Den großen Mehrwert bietet GRID bei komplexeren Beispielen die dann Responsiv sind. Das gezeigte Beispiel kann man ja bereits sehr leicht ohne GRID bauen.

Experimentelle Werte für Display:

WerteBedeutung
grid;Gestaltungsraster für die Kind-Elemente. Ermöglicht mehr Einstellungen im Vergleich zu FLEX, da die Elemente sowohl auf Ebene der Spalten als auch auf ebene der Zeilen verbunden werden können. Leider noch nicht vollständig unterstützt und ist nur über ein Polydill lauffähig. Verhält sich wie als BLOCK-Element. GRID wird näher über weitere Eigenschaften definiert.
inline-grid;Gestaltungsraster für die Kind-Elemente. Ermöglicht mehr Einstellungen als Flex. Leider noch nicht vollständig unterstützt. Verhält sich wie als Inline-Element.
run-in;Dynamisches Verhalten. Je nach Kontext verhält sich das Element als BLOCK, Inline oder Inline-Block. Der Kontext wird dabei vom Nachbarn bestimmt.
contents;Das eigene Box-Verhalten wird deaktiviert.

Display: NONE vs. Opacity

Hinweis: Display: NONE und alle Kinder-Elemente sind nicht da und nicht einfach nur Transparent. Wird, z.B. mit :hover, display: NONE in einen anderen Wert für display geändert können Animationen abgespielt werden.

Wichtige Werte für Display:

WerteBedeutung
none;Das Element wird nicht angezeigt und ist praktisch nicht da. Es hat keine Auswirkungen auf das Layout. Das ist der Unterschied zu OPACITY: 0 (Deckkraft: 0) und VISIBILITY: HIDDEN. Diese beiden machen das Element transparent. Ein transparenter Link ist aber z.B. Immer noch klickbar. Transparenter Text ist auch auszahlbar. Mit display: NONE ist der Link hingegen nicht im Browser. Im HTML-Quelltext der Seite wird der Inhalt auf jeden Fall aufgeführt. NONE kann gut genutzt werden um z.B. Inhalte auszublenden die bei anderen Zuständen (:hover, media-querie etc.) eingeblendet werden.
inline;Das Element kann keine Breite und Höhe haben sondern übernimmt diese Werte von seinem Inhalt. Es erzwingt keine neue Zeile. Ist Standard bei SPAN und wird benutzt um z.B. Wörter in einem Absatz anders zu gestalten. Es entspricht einen Zeichenformat in InDesign.
block;Das Element kann Breite und Höhe, Innenabstand und Aussenabstand (Boxmodell) haben. Es erzwingt eine neue Zeile. Die meisten HTML Elemente haben display: BLOCK als Standard. Z.B. H1 bis H6, P oder LI usw.
inline-block;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben.(Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
list-item;Das Element steht inline, kann aber Breite und Höhe haben, Innenabstand und Aussenabstand haben (Boxmodell). Standard-Wert für die Breite ist die Breite des eigenen Inhalts.
inline-list-item;Verhält sich wie LIST-ITEM. Der Inhalt wird jedoch unter dem Aufzählungszeichen umbrochen und nicht unter dem Anfang des Textes.
inherit;Das Element erbt (INHERIT) den Display-Wert von seinem Eltern-Element
initial;Die Display Eigenschaft wird auf den initialen Standard zurückgesetzt.

► Weitere Infos

Interne Quellen

Display: FLEX

code.arnoldbodeschule.de/flexcontainer-elternelement/
http://code.arnoldbodeschule.de/flex-items-kinderelemente/

Die beiden Seiten bei CODE zeigen mit vielen Editoren und umfangreichen weiterführenden Informationen die Möglichkeiten mit display: FLEX und seinen ergänzenden Eigenschaften für den Flex-Container und seine Kind-Elemente.


Externe Quellen

CSS Display Module Level 3

www.w3.org/TR/css-display-3/

W3C Working Draft für Display. Dort sind auch Werte wie RUBY beschrieben. RUBY ist eine Möglichkeit ÜBersetzungen für asiatische Zeichen darzustellen.


CSS Grid Layout Module Level 1

http://www.w3.org/TR/css-grid-1/

W3C Working Draft Display GRID.


https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display

hhttps://wiki.selfhtml.org(...)display

Übersicht in deutscher Sprache bei dem Wiki von Selfthtml zu der Eigenschaft display.


https://developer.mozilla.org/de/docs/Web/CSS/display

https://developer.mozilla.org(...)display

Übersicht in deutscher Sprache bei dem Mozilla-Develober-Network zu der Eigenschaft display.


The Anti-hero of CSS Layout
"display:table"

colintoh.com/blog/display-table-anti-hero

Englischer Artikel rund um display: TABLE.


Should I use Grid or Flexbox?

rachelandrew.co.uk/.../should-i-use-grid-or-flexbox/(...)

Rachel Andrews beschreibt in dem englischen Artikel Einsatzgebiete für FLEX und GRID.