+ // "ältere" Schreibweise
+ .block {
+ display: block;
+ }
+
+ // "modernere" Schreibweise
+ .block {
+ display: block flow;
+ }
+
+ Aus CSS-Perspektive ist jedes (HTML)-Element eine Box. Es gibt verschiedene Box-Modelle die sich am Ende jeweils in 2 Kategorien eingliedern lassen:
+
+ Die block-box und die inline-box.
+
Eine Block-Box ist dadurch gekennzeichnet, dass sie die volle Verfügbare Breite auf dem Viewport einnimmt. Beispiele hierfür sind:
+Inline-Boxen verhalten sich "gegensätzlich". Inline-Boxen nehmen nur den Platz ein, den der Inhalt braucht. Beispiele sind:
+Mittels CSS kann man das (Standard)-Verhalten ändern. Mehr dazu in kürze.
+Eine Box in CSS besteht aus mehreren Teilen, die ineinander verschachtelt sind.
+Wir haben auch bereits alle Teile kennen gelernt:
+Im Standard-Box-Model, nimmt eine Box die Summe aus margin + border + padding + content-size ein.
+content-size ist die Breite und Höhe, die der eigentliche Inhalt einnimmt.
+Es gibt ein alternatives Model, dieses rechnet padding und border zu einer Angegebenen Breite / Höhe mit ein.
+Inneres Layout mittels Flexboxen
+
+ inline und block haben bisher für die Interaktion mit Benachbarten Inhalten (Siblings) geregelt.
+
+ Nun wollen wir uns mit dem "inneren" display befassen. Die inneren Display-Regeln sorgen für eine Strukturierung der Kind-Elemente innerhalb eines Layout-Containers.
+
Dabei kann der Layout-Container nach außen hin ein inline oder block Element sein
+
+ // Explizites Inline-Verhalten
+ .inline-flex {
+ display: inline flex;
+ }
+
+ // Explizites Block-Verhalten
+ .block-flex {
+ display: block flex;
+ }
+
+ // Implizites Verhalten ist BLOCK
+ .flex {
+ display: flex;
+ }
+ Flexbox-Container lassen die direkten Kinder in ein Flexbox-Layout
+Mithilfe weiterer Regeln lässt sich das Verhalten der Kind-Elemente beeinflussen
+Zusätzlich können die Kinder mit ein paar CSS-Regeln positioniert und strukturiert werden.
+
+ <div class="parent">
+ <div class="child">Erstes Kind</div>
+ <div class="child">Zweites Kind</div>
+ <div class="child">Drittes Kind</div>
+ </div>
+ Ungestyltes Verhalten
+
+ .child {
+ background-color: aquamarine;
+ border: 2px solid black;
+ padding: 0.5rem;
+ }
+
+ .parent {
+ display: flex;
+ }
+ Gestyles Verhalten
+"Zu viele" Kinder
+Ohne weiteres Styling, zwingt CSS alle Kind-Container in eine Zeile
+Manchmal ist dass nicht das, was wir "wollen". Aber dagegen lässt sich etwas unternehmen:
+ +
+ // Wir fügen diese Klasse dem Parent-Element hinzu
+ .wrap {
+ flex-wrap: wrap;
+ }
+ Viele Kinder - Mit Wrap
+Und wenn wir jetzt den Kinden noch ein wenig Style mitgeben:
+
+ // Wir fügen die "uniform" Klasse jedem Kind hinzu
+ // Jedes Kind nimmt ein drittel der Parent-Breite ein.
+ .child.uniform {
+ width: calc(1/3 * 100%);
+ }
+ Viele Kinder - Mit Wrap
+Warte... Jedes Element sollte 33% Breit sein, also sollten eigentlich in jeder Zeile 3 Kinder sein?
+Stimmt auch, aber CSS berechnet die Breite anhand eines bestimmten Models.
+box-sizingWie bereits erwähnt kennt CSS 2 "Wege" um die Größe eines Elementes festzulegen.
+Das Standard (Box-Model) rechnet die Border und das Padding nicht in die Element-Größe mit ein.
+Das Alternative Model macht dies.
+
+ // Wird jedem Kind zugewiesen
+ .alternative-box {
+ box-sizing: border-box;
+ }
+ 3x3 Layout
+gapMittels gap lässt sich ein Abstand zwischen die Kind-Elemente im Layout anwenden:
+ // Klasse für das Parent-Elemente
+ .gapped {
+ gap: 0.5rem;
+ }
+ Gap! But ... broken?
+Der Flex-Container fügt nun 0.5rem zwischen den Kindern hinzu, was die Kinder selber nicht wissen oder mit in die Berechnung im Box-Model einfließen lassen können.
+Man erkennt also, dass wir gegebenenfalls auf Probleme stoßen, wenn das Parent-Element was modifizert.
+Lösungsmöglichkeiten
+
+ // Gap in Breite Berücksichtigen (anzuwenden für Kind-Elemente)
+ .child {
+ width: calc(1/3 * 100% - 0.5rem)
+ }
+ Gap! But ... Fixed!
+flex-directionWir können das Layout-ing, in der Richtung anpassen. Dafür haben wir folgende Optionen
+
+ // Die Klasse muss dem Parent-Container übergeben werden
+ .direction {
+ flex-direction: row
+ | row-reverse
+ | column
+ | column-reverse;
+ }
+ wrap und direction mit flex-flowEs gibt eine Shorthand-Property um Richtung und Wrapping zusammenzufassen:
+flex-flow
+ .col-wrap {
+ flex-flow: column wrap;
+ }
+ Flexbox erlaubt es, die Kinder innerhalb der Flexbox mittels 3 Regeln zu positionieren und zu modifizieren
+justify-contentZum kurzen Verständnis muss folgendes geklärt werden:
+column: Main verläuft nun von oben nach untencolumn-reverse: Main verläuft von unten nach obenNun zurück zu justify-content
+Nehmen wir folgende Ausgangslange an:
+
+ .justify-center {
+ justify-content: center;
+ }
+ // Zur Visualisierung des Containers:
+ .bordered {
+ background-color: burlywood;
+ }
+ justify-content: center
+Mögliche Werte:
+flex-start
+flex-end
+space-between
+space-around
+space-evenly
+align-itemsWerte:
+Setup (Default: Flex-Start)
+Flex-End
+Center
+Stretch
+align-contentÄhnlich zu justify-content, positioniert align-content Flex-Inhalte entlang der Cross-Axis
Es gelten die gleiche Keywords wie bei justify-content
Flex-Start (default)
+Flex-End
+space-around
+space-between
+space-evenly
+Zusätzlich zu den CSS-Regeln die man auf das Parent-Element anwenden kann, gibt es auch ein paar Möglichkeiten die Kind-Elemente einer Flexbox zu modifizieren.
+Mit grow & shrink kann einzelnen Kind-Elementen mitgeteilt werden, sich mehr beziehungsweise weniger Platz innerhalb einer Flexbox einzunehmen.
Mithilfe von grow, kann Platz zwischen Elementen innerhalb einer Flexbox proportional verteilt werden.
+ .flex {
+ display: flex;
+ background-color: darkgoldenrod;
+ gap: 1rem;
+ }
+
+ .flex > div {
+ padding: 1rem;
+ background-color: #99f;
+ }
+
+ .child-1 {
+ flex-grow: 1;
+ }
+
+ .child-2 {
+ flex-grow: 2;
+ }
+
+ .child-3 {
+ flex-grow: 3;
+ }
+ Mit flex-basis können wir angeben welche Größe / Breite ein Flex-Kind Standardmäßig erhalten soll, bevor die restliche Verfügbare Breite zwischen den Elementen verteilt wird.
+ .child-1 {
+ flex-grow: 1;
+ }
+
+ .child-2 {
+ flex-grow: 1;
+ flex-basis: 50%;
+ }
+
+ .child-3 {
+ flex-grow: 1;
+ }
+ grow, shrink und basis können auch mit einem Style-Befehl gleichzeitig gesetzt werden:
flex: <grow> <shrink> <basis>;
Mit order gibt uns Flexbox eine leichte Möglichkeit Elemente innerhalb einer Flexbox neu zu positionieren.
Alle Elemente in einem Flexbox Container haben per Default eine order von 0.
Elemente mit einer gleichen Order, erscheinen in Reihenfolge, wie sie auch im HTML-Dokument vorkommen.
+Elemente die eine höhere order haben, werden nach den kleineren Werten angezeigt. Negative Werte sind auch möglich.
+ .child-2 { order: -1; }
+ .child-3 { order: 5; }
+ .child-4 { order: 2; }
+ Lange Zeit wurde mit dem Flexbox Layout etwas versucht zu lösen, was heute ein neueres System löst: Grids
+Mittels Flexbox wurden Elemente mit festen breiten und Margins versehen, sodass sie wie in einem Grid genutzt werden können.
+Die Moderne Lösung: display: grid;
Das CSS-Grid bietet viele fundamentale aber auch innovative Wege um ein Grid zu definieren und Inhalte darin zu positionieren.
+Mittels dem Grid, können Elemente in einem 2-Dimensionalen Raster positioniert werden.
+Fangen wir mit dem Grundbausteinen an. Unsere "Spielwiese" wird wie folgt aussehen:
+Nun nehmen wir das Parent-Element und machen es zu einem Grid:
+
+ .parent {
+ display: grid;
+ }
+ Das Ergebnis ist nun wie folgt:
+Es passiert zunächst nicht viel...
+Das ist so richtig. Mit einem CSS Grid müssen wir dem Grid mitteilen wie Spalten / Zeilen aufgeteilt werden sollen.
+Dies kann auf mehrere Arten Geschehen:
+Mit grid-template-columns und grid-template-rows wird ausgedrückt, wie Breit Spalten, und wie hoch Zeilen sein sollen.
Es müssen nicht beide keywords verwendet werden, Spalten und Zeilen nehmen die benötigte Höhe oder Breite ein, wenn eine Definition fehlt.
+Teilen wir nun das Grid in 3 Spalten auf. Jede Spalte hat 200px Breite
+
+ .cols-200-200-200 {
+ grid-template-columns: 200px 200px 200px;
+ }
+ Wir sehen, die sechs Kind-Elemente reihen sich in 2 Zeilen zu je 3 Spalten an.
+Natürlich sind 200px mal 3 recht spezifisch und so gesehen auch nicht wirklich Mobile-Friendly.
+Dafür hat das CSS-Grid eine "spezielle" Einheit: Die "Fraction" (fr).
+1fr wirkt sich je nach Situation verschieden aus. Nutzen wir zunächst die neue Einheit über alle Elemente gleichermaßen aus:
+
+ .cols-even {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+ Jede Spalte nimmt nun die exakt gleiche Breite ein, wobei die komplette vorhandene Viewport-Breite verwendet wird:
+Wie sieht nun die Verwendung von Mischformen aus?
+
+ .cols-mixed {
+ grid-template-columns: 20% 1fr 250px;
+ }
+ Die erste Spalte nimmt nun 1/5 der Breite ein, die 3. Spalte 250px.
+Unter verschiedenen Displays kann die Angabe nur ein "maximum" sein. Das Grid versucht dabei sein bestes um den Platz zu verteilen.
+Wichtig beim "mischen" von Fraction-Units und Absoluten Größen:
+Das Grid gibt den absoluten Breiten Vorrang. Erst danach wird die restsliche Verfügbare Breite an Fractions verteilt. Ein Beispiel:
+grid-template-columns: 200px 1f 4fr
grid-template-columns: 200px 1f 4fr
Zuerst werden die 200px der ersten Spalte zugewiesen, die restliche Breite wird durch 5 (1fr + 4fr) geteilt und dann entsprechen "1 zu 5" und "4 zu 5" verteilt.
+Rechenbeispiel bei einer Verfügbaren Breite von 700px:
+200px für Spalte #1, 500px bleiben übrig.
500px durch insgesamt 5fr geteilt sind 100px je 1fr. Spalte #2 erhält demnach 100px Breite und Spalte 3 400px Breite.
Nun lasst uns die fr-Einheit nutzen um der ersten Spalte 50% und den restlichen Spalten jeweils 25% Platz zuzusprechen:
+
+ .cols-2-1-1 {
+ grid-template-columns: 2fr 1fr 1fr;
+ }
+ repeatEs ist bei sich gleich Verhaltenden Breitenangaben (z.b. 1fr 1fr 1fr 1fr...) eine Hilfsfunktion "repeat" zu verwenden:
+ .cols-repeat-1fr {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ repeat nimmt dabei auch mehrere Einheiten an, die "Funktion" wiederholt einfach den 2. Parameter so oft wie in Paramter 1 beschrieben:
+ .cols-repeat-1-2 {
+ grid-template-columns: repeat(2, 1fr 2fr);
+ }
+ Bisher haben wir mit grid-template-columns explizit Spalten erzeugt.
Nachdem die erste Zeile voll besetzt war, hat das CSS-Grid automatisch eine 2. Zeile generiert und weitere Elemente dort hinein gepackt.
+Diese Zeilen wurden implizit generiert. Wir können dies aber in gewisser Weise steuern:
+
+ .rows-auto-200 {
+ grid-auto-rows: 200px;
+ }
+ grid-auto-rows teilt den impliziten Zeilen mit, wie viel Höhe diese einnehmen sollen:
minxmax für automatische Implizite SektionenEs macht auch hier natürlich wenig Sinn, feste Werte für die Spalten oder Zeilen mit der grid-auto-Syntax zu vergeben.
Auch hierfür gibt es wieder Möglichkeiten: minmax
Mithilfe dieser CSS-Funktion können wir mindest- sowie maximale Höhe angeben, die das Grid (genauer gesagt dessen Zellen) einnehmen soll.
+
+ .rows-auto-minmax {
+ grid-auto-rows: minmax(150px, auto);
+ }
+ Wie erwähnt, sorgt minmax, dass die Spalte oder Zeile eine mindest und maximale Höhe, beziehungsweise Breite, einnimmt.
Das keyword auto für den "max"-Teil sorgt dafür, das sich die maximale Höhe anhand des Inhaltes, der größten Zelle, bemessen wird.
An unserem Beispiel bedeutet dies konkret: 150px mindestens hoch, ansonsten an der höchsten Zelle orientieren.
+Wenn wir mittels grid-template-columns Spalten (und implizit Zeilen) erzeugen, können wir den einzelnen Kind-Elementen mitteilen, wie viele Spalten/Zeilen sie einnehmen sollen.
Bei der Erstellung von beispielsweise Spalten, können wir uns Gedanklich jeden Bereich zwischen den Spalten (Ränder miteinbezogen) durchnummeriert vorstellen
+Das Konzept der Nummerierung lässt sich auch 1 zu 1 auf Zeilen übertragen.
+Lasst uns nun eine Box erstellen, die über alle Spalten "gezogen" wird:
+
+ .box-0 {
+ grid-column-start: 1;
+ grid-column-end: 4;
+ }
+ Es lassen sich auch start & end für rows (Zeilen) definieren:
+
+ .box-0 {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ }
+
+ .box-1 {
+ grid-column-start: 3;
+ grid-column-end: 4;
+ grid-row-start: 1;
+ grid-row-end: 3;
+ }
+ Es ist auch deutlich ersichtlich, dass weitere Elemente die "leer gelassenen" Bereiche automatisch auffüllen.
+Das ganze lässt sich aber auch wieder kürzer schreiben:
+
+ .box-0 {
+ grid-column: 1 / 3;
+ }
+
+ .box-1 {
+ grid-column: 3 / 4;
+ grid-row: 1 / 3;
+ }
+ template-areas & named areas
+ Eine etwas "verständlichere" Art und Weise das Grid zu definieren und dessen Kinder zu positionieren ist mittels benannten Elementen.
+Als Beispiel werden wir ein klassisches Homepage-Layout kreieren.
+Benennen wir zuerst die Kind-Elemente die sich später im Grid befinden werden:
+
+ .box-0 {
+ grid-area: header;
+ }
+ .box-1 {
+ grid-area: menu;
+ }
+ .box-2 {
+ grid-area: content;
+ }
+ .box-3 {
+ grid-area: footer;
+ }
+ Zur Feststellung: Wir können den Bereichen jeden Namen geben den wir wollen.
+Als nächstes definieren wir die Grid-Struktur mittels grid-template-columns & grid-auto-rows
Altbekanntes: Ein Grid mit 3 (gleichgroßen) Spalten, Zeilen implizit mit minmax
+
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-rows: minmax(100px, auto);
+ }
+ Nun benutzen wir grid-template-areas, um dem Grid mitzuteilen wie die Kind-Elemente verteilt werden sollen. Dafür benutzen wir die zuvor verwendeten Namen.
+ .grid {
+ // ...
+ grid-template-areas:
+ "header header header"
+ "menu content content"
+ "menu content content"
+ "footer footer footer";
+ }
+ Das Ergebnis:
+Falls wir wollen, dass in einer "Zelle" kein Inhalt angezeigt wird, können wir einfach nur einen Punkt schreiben:
+
+ .grid {
+ // ...
+ grid-template-areas:
+ "header header header"
+ "menu content content"
+ ". content content"
+ "footer footer footer";
+ }
+ Zu guter letzt: Auch im Grid lässt sich gap wie bereits in der Flexbox verwenden.
+ Um einen beliebiges Tag in ein inline-Verhalten zu zwingen, reicht folgendes aus:
+
+ // "ältere" Schreibweise
+ .inline {
+ display: inline;
+ }
+
+ // "modernere" Schreibweise
+ .inline {
+ display: inline flow;
+ }
+ + Zum aktuellen Zeitpunk, gibt es eine neuere Schreibweise, die aus 2 "Kommandos" besteht. +
+Zum einen wird definiert wie sich das äußere Verhalten andere Elemente auswirkt: inline oder block
+Zum anderen wird das innere Verhalten definiert. Dies bezeichnet das Layout-Verhalten: flow, flex oder grid
+