Frontend Development

# CSS Layout

Bestimmte HTML-Elemente werden vom Browser ohne zusätzliches CSS auf eine bestimmte Weise dargestellt. Deswegen ist es auch so wichtig, die richtigen HTML-Elemente zu verwenden, weil sich dann manches Styling von selbst erledigt.

Mit der display-Property kannst du unterschiedliche Layouts für dein HTML steuern.

# display: inline;

Jeder Browser interpretiert das <span>-Tag standardmässig mit display: inline;, ohne dass du im CSS etwas zusätzlich definieren musst. Ein HTML-Element, dass display: inline gestylt wird, kann Teil eines Fliesstextes sein und kann sich auch über mehrere Zeilen erstrecken. Abstände mit padding oder margin (wie im Box Model) akzeptiert display: inline; nicht.

span {
  border: 0.1rem solid tomato;
}

<p>
  Ich bin ein Text, bei dem <span>ein kleiner Teil hervorgehoben wird und dessen Inhalt sich über mehrere Zeilen gehen kann.</span>
</p>

Ergebnis

Ich bin ein Text, bei dem ein kleiner Teil hervorgehoben wird und dessen Inhalt sich über mehrere Zeilen gehen kann.

# display: block;

Elemente mit display: block; nehmen die gesamte Breite ihres Parents ein. Mehrere block-Elemente erscheinen untereinander. Die Höhe wird definiert durch den Inhalt dieser Box, sofern dieses Verhalten nicht durch CSS-Regeln überschrieben wurde. Ein block-Element ohne Inhalt (meistens Text) hat deswegen auch keine Höhe.

Hier ein Beispiel, wie sich das Layout verändert, wenn du für ein <span>-Element display: block definierst.

span {
  display: block;
  border: 0.1rem solid tomato;
}

<p>
  Ich bin ein Text, bei dem <span>ein kleiner Teil als Block angezeigt wird.</span> Der restliche Text ist davon nicht betroffen.
</p>

Ergebnis

Ich bin ein Text, bei dem ein kleiner Teil als Block angezeigt wird. Der restliche Text ist davon nicht betroffen.

# display: inline-block;

inline-block kombiniert das Verhalten von inline und block. Im Gegensatz zu inline kann inline-block auch padding- und margin-Properties verstehen.

Einzelne Einträge einer Liste werden von Browsern standardmässig als block dargestellt. Möchtest du diese Listeneinträge nicht untereinander, aber dafür nebeneinander darstellen, dann ist inline-block hilfreich.

<ul>
  <li>Butter</li>
  <li>Tomaten</li>
  <li>Salat</li>
  <li>Mandelbärli</li>
</ul>

Ergebnis

  • Butter
  • Tomaten
  • Salat
  • Mandelbärli

Ergebnis mit inline-block

li {
  display: inline-block;
  border: 0.1rem solid tomato;
  padding: 0.5rem;
}
  • Butter
  • Tomaten
  • Salat
  • Mandelbärli

# display: flex;

display: flex beschreibt Flexbox, welches eine fortgeschrittene Möglichkeit bietet, moderne, responsive Layouts zu gestalten, ohne dass Properties wie position, float oder clear benutzt werden müssen.

# Wann Flexbox und wann Grid?

Unterschied Flexbox zu Grid Quelle

Flexbox eignet sich am besten, wenn Inhalte in einer Dimension gelayoutet werden sollen – in einer Zeile oder Spalte. Grid eignet sich für das Layouten von Inhalten in zwei Dimensionen – Zeilen und Spalten.

# Verwendung von Flexbox

Um die Funktionalitäten von Flexbox nutzen zu können, muss ein Flexbox-Container definiert werden. Darin enthalten sind die Elemente, die mit Flexbox gelayoutet werden.

<div class="flexbox-container">
  <div class="element-eins">
    Erstes Flex-Item
  </div>
  <div class="element-zwei">
    Zweites Flex-Item
  </div>
</div>

.flexbox-container {
  display: flex;
  border: 1px solid royalblue;
}

.element-eins,
.element-zwei {
  background-color: orange;
  padding: 0.5rem;
  margin: 0.5rem;
}

Ergebnis

Erstes Flex-Item
Zweites Flex-Item

Auf dem Flex-Container können mit den Eigenschaften align-items und justify-content die Position der Flex-Items verändert werden. align-items steuert die Ausrichtung auf der Y-Achse, justify-content die Ausrichtung auf der X-Achse. Mit flex-direction können die X- und Y-Achse vertauscht werden. Standardmässig zeigt der Browser die Flex-Items in einer Zeile an (row). Die Flex-Items können mit flex-direction: column; untereinander angezeigt werden. Mit row-reverse und column-reverse können die Flex-Items in ihrer Darstellung auch gekehrt werden.




 
 
 
 


.flexbox-container {
  display: flex;
  border: 1px solid royalblue;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 20rem;
}

Ergebnis

Erstes Flex-Item
Zweites Flex-Item

Bisher nehmen die Flex-Items nur die Grösse ein, die ihr Inhalt vorgibt. Möchtest du diese Grössen manipulieren, dann kommen die Properties flex-grow, flex-shrink und flex-basis ins Spiel.

Flex-Items haben standardmässig im Browser folgende Properties:

  • flex-grow: 0; (Items werden nicht grösser als ihr Inhalt)
  • flex-shrink: 1; (Items dürfen kleiner werden, sofern es ihr Inhalt zulässt oder dieser umgebrochen werden kann.)
  • flex-basis: auto; (Die Grösse des Flex-Items wird durch seinen Inhalt definiert)
  • order: 0; (Die Reihenfolge entspricht der des HTML-Codes)

Beispiel

Du hast einen Flexbox-Container mit zwei Flex-Items innerhalb, die beide jeweils 1000px einnehmen wollen. Wenn aber nun keine 2000px an Platz zur Verfügung stehen um beide nebeneinander darzustellen, kommen flex-grow und flex-shrink zum Einsatz.

Mit flex-shrink kannst du einen Faktor definieren der bestimmt, um wie viel das Flex-Element im Verhältnis zu den restlichen Flex-Elementen im Container schrumpfen soll, wenn nicht genug Platz in der Reihe vorhanden ist. Standardmässig, wie oben beschrieben haben alle Flex-Items den Faktor 1 und verkleinern sich also gleichermassen es sei denn, eines der Flex-Items hat mehr Inhalt als das andere. Dann richtet sich alles grundsätzlich an der flex-basis: auto; Standardeinstellung. In diesem Beispiel sollen aber alle Items eine flex-basis von 1000px haben.

.element-eins {
  flex-basis: 1000px;
  flex-shrink: 5; /* Soll sich doppelt so stark verkleinern als die anderen */
}
.element-zwei {
  flex-basis: 1000px;
  flex-grow: 1; /* Soll den verfügbaren Raum auffüllen. Standard ist immer 0 also wäre das Element nur so breit wie sein Inhalt. */
}

Ergebnis

Erstes Flex-Item dessen Inhalt aufgrund der flex-shrink und flex-basis Definitionen umbrechen muss.
Zweites Flex-Item das sich trotz wenig Inhalt aufspannt.

Mit der Property flex-wrap: wrap; auf dem Flexbox-Container kannst du dem Browser sagen, dass er ganze Flex-Items (nicht deren Inhalt) auf eine neue Zeile umbrechen soll, sofern sie zu gross werden.

Flexbox ist sehr umfangreich und braucht etwas Übung. Das Ergebnis sind flexible Layouts, die auf unterschiedlichsten Screens funktionieren. Im Anhang findest du dazu nützliche Links, die dir den Umgang mit Flexbox erleichtern.

Weiterführende Links

# display: grid;

Flexbox ist für eindimensionale Layouts geeignet, Grid für zweidimensionale Layouts, in dem Fall wenn du mehr Gestaltungsmöglichkeiten mit Zeilen und Spalten benötigst.

Die untenstehende Grafik erklärt dir die grundlegenden Konzepte für CSS Grids.

Konzepte im CSS Grid Quelle

Ähnlich wie bei Flexbox musst du zuerst einen Grid-Container definieren, indem du dein Gridlayout definieren möchtest.

.grid-container {
  display: grid;
  /*
    Die Einheit fr bedeutet “Fraction” (Anteil).
    Wird eine Fläche in jeweils zwei gleich grosse
    Anteile aufgeteilt, dann ist jedes 50% breit. 

    Untenstehend wird ein Layout mit zwei Spalten 
    und zwei Zeilen erstellt, bei dem die Spalten 
    und Zeilen jeweils 50% der Höhe/Breite des 
    verfügbaren Platzes einnehmen.
  */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid royalblue;
}

Mit den Properties grid-column und grid-row kannst du deine Inhalte nun bestimmten “Grid Cells” zuordnen. Das funktioniert wie beim Spiel “Schiffe versenken”, bei dem du die Koordinaten auf der X-Achse (grid-column) und Y-Achse (grid-row) kommunizierst.

.main {
  grid-column: 2; /* 2. Spalte */
  grid-row: 2; /* 2. Zeile */
}

.header {
  grid-column: 2; /* 2. Spalte */
  grid-row: 1; /* 1. Zeile */
}

.sidebar {
  grid-column: 1; /* 1. Spalte */
  grid-row: 1; /* 1. Zeile */
}

<div class="grid-container">
  <div class="sidebar">Sidebar</div>
  <div class="header">Header</div>
  <div class="main">Main</div>
</div>

Ergebnis

Sidebar
Header
Main

Mit der Properties grid-column-gap und grid-row-gap kannst in dem Grid-Container die Abstände zwischen den Grid Cells bestimmen.






 
 
 
 
 
 
 
 


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid royalblue;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  /*
    Wenn grid-column-cap und grid-row-gap gleich gross sind,
    kannst du auch einfach schreiben…
    
    gap: 1rem;
  */
}

Ergebnis

Sidebar
Header
Main

Weiterführende Links

← Absolute & Relative →