11. Unterrichtsblock

CSS Grid

Viele Webseiten basieren auf einer Rasteransicht (englisch „grid“), was bedeutet, dass die Seite in Spalten unterteilt ist:

Die Verwendung einer Rasteransicht ist beim Entwerfen von Webseiten sehr hilfreich. Es erleichtert das Platzieren von Elementen auf der Seite.

CSS display: grid;

Flexbox

Vor dem Flexbox-Layoutmodul gab es vier Layoutmodi:

• block für Abschnitte auf einer Webseite
• inline, für Text
• table, für zweidimensionale Tabellendaten
• position, für die explizite Position eines Elements

Das Flexible-Box-Layout-Modul erleichtert das Entwerfen einer flexiblen, responsiven Layoutstruktur ohne Verwendung von Float oder Positionierung.

Flexbox-Elemente

Um mit der Verwendung des Flexbox-Modells zu beginnen, müssen wir zunächst einen Flex-Container definieren:

.flex-container {
  display: flex;
  background-color: pink;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;

<div class="flex-container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div> 
  <div>E</div> 
</div>

Ein Flexbox-Layout benötigt ein Eltern-Element mit der display Eigenschaft und dem Wert flex.
Direkte Kind-Elemente des flexiblen Eltern-Elements werden dadurch automatisch auch flexibel

Das obige Element repräsentiert einen Flex-Container (der rötliche Bereich) mit drei Flex-Elementen.