Responsive-Webdesign

WEBLAYOUT MIT DISPLAY

display ist die CSS-Eigenschaft, mit der definiert wird, wie sich Elemente im Layout anordnen.

Mit display wird Elementen keine fixe Position auf einer Webseite zugewiesen, sondern ein bestimmtes Verhalten bezüglich der eigenen Größe und zu davor und danach liegenden Elementen.

Für Weblayout ist diese Methode zur Positionierung in den meisten Fällen die beste Lösung, da für unterschiedliche Ausgabeformate eine automatische Anpassung der Platzierung notwendig ist. Es gibt eine sehr lange Liste an möglichen Display-Werten, im Folgenden werden vier davon genauer beschrieben.

DISPLAY:BLOCK

BLOCK

Den meisten HTML-Tags wird im Browser-Stylesheet der Display-Wert block zugewiesen. Block-Elemente positionieren sich immer unter oder über einembenachbarten Element und sind 100% breit, so breit wie das Eltern-Element,falls man keine alternative Breite definiert.

DISPLAY:INLINE

INLINE BLOCK

Inline-Block-Elemente verhalten sich einerseits wie Text, andererseits wieBoxen. Sie übernehmen alle Boxen-Eigenschaften, haben automatisch nur dieBreite, die durch ihre Inhalte erzwungen wird und ordnen sichnebeneinander an.

DISPLAY:FLEX

FLEX-ITEM1

FLEX-ITEM2

FLEX-ITEM3

FLEX-ITEM4

FLEX-ITEM5

FLEX-ITEM6

Die Anordnung, die Ausrichtung sowie die Höhen und Breiten der Elementein einer Flexbox können über zahlreiche Eigenschaften für den Flex-Container und die Flex-Items beliebig verändert werden.