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 bezüglich der eigenen Größe und zu davor und danach liegenden Elementen.
Für Weblayout ist diese Methode zur Positionierung in den meisten Fällen die beste Lösung, da für
unterschiedliche Ausgabeformate eine
automatische Anpassung der Platzierungnotwendig ist. Es gibt eine sehr lange Liste
an möglichen Display-Werten, im Folgenden werden vier davon genauer beschrieben.
DISPLAY:BLOCK
Den meisten HTML-Tags wird im Browser-Stylesheet der Display-Wert block zugewiesen. Block-Elemente
positionieren sich immer unter oder über einem benachbarten Element und sind 100% breit, so breit
wie das Eltern-Element, falls man keine alternative Breite definiert.
DISPLAY:INLINE
Inline
Inline
Inline
Inline
Inline
Inline
Inline
Inline
Inline-Elemente verhalten sich wie Text. Sie richten sich auch an der Grundlinie aus und stellen
sich solange der Platz reicht nebeneinander wie Wörter. Diese Elemente übernehmen typische
Boxen-Eigenschaften wie margin-bottom, margin-top, width und height NICHT!
DISPLAY:INLINE-BLOCK
Inline-Block
Inline-Block
Inline-Block
Inline-Block
Inline-Block
Inline-Block
Inline-Block-Elemente verhalten sich einerseits wie Text, andererseits wie Boxen. Sie übernehmen
alle Boxen-Eigenschaften, haben automatisch nur die Breite, die durch ihre Inhalte erzwungen wird
und ordnen sich nebeneinander 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 Elemente in einer Flexbox können über
zahlreiche Eigenschaften für den FlexContainer und die Flex-Items beliebig verändert werden. A
Complete Guide to Flexbox