📅 Dokumentation vom 27.08 (Block 2)¶

Am 27. August habe ich mich mit drei wichtigen Layout-Techniken in CSS beschäftigt: Float, Grid und Flexbox. Hier ist eine einfache Zusammenfassung von dem, was ich gelernt habe:

🌀 Float¶

Früher hat man Float oft für Layouts benutzt, zum Beispiel für Sidebars oder um Bilder im Text anzuordnen. Heute nutzt man es eher für kleinere Aufgaben, wie das Platzieren von Logos oder das Umfließen von Text um ein Bild.

Ich habe gelernt, dass man mit float: left; ein Element so platzieren kann, dass der Text drumherum fließt. Mit clear: both; kann man verhindern, dass andere Elemente um das Float-Element fließen, damit sie wieder normal untereinander stehen. Auch wenn Float nicht mehr so häufig verwendet wird, ist es trotzdem nützlich zu wissen, wie man es einsetzt.

🔲 Grid¶

Grid ist ein Layout-System, mit dem man Elemente in Reihen und Spalten anordnen kann. Das ist super praktisch, wenn man komplexere Layouts braucht, weil man die Bereiche genau definieren kann. Ich habe gelernt, wie man mit grid-template-columns die Anzahl und Breite der Spalten bestimmt und mit grid-template-rows die Höhe der Zeilen festlegt.

Mit Grid kann man die Webseite wie ein Schachbrett aufbauen, was besonders hilfreich ist, wenn man viele Inhalte nebeneinander und untereinander platzieren möchte. Auch grid-gap ist nützlich, um Abstände zwischen den Elementen festzulegen, damit alles ordentlich aussieht. Außerdem kann man mit grid-template-areas Bereiche benennen, was das Layout übersichtlicher macht.

📦 Flexbox¶

Flexbox eignet sich gut, wenn man Elemente in einer Reihe oder Spalte anordnen möchte. Es ist besonders nützlich, wenn man ein flexibles Layout braucht, das sich an verschiedene Bildschirmgrößen anpasst. Ich habe gelernt, wie man mit flex-direction die Richtung der Elemente festlegt (row oder column) und mit justify-content die Ausrichtung steuert (z.B. zentriert oder am Anfang).

Flexbox ist toll, weil man damit Elemente einfach gleichmäßig verteilen oder zentrieren kann, ohne viel komplizierten Code zu schreiben. Besonders für Responsive Design ist Flexbox hilfreich, weil man die Webseite so gestalten kann, dass sie auf Computern und Handys gut aussieht.

🌐 Flexbox und Responsive Design¶

Ich habe auch ein Beispiel für Responsive Design mit Flexbox erstellt. Dabei habe ich flex-grow, flex-basis und flex-shrink verwendet, um die Größe der Elemente anzupassen.

flex-grow sorgt dafür, dass bestimmte Elemente mehr Platz einnehmen, wenn genug Platz da ist.
flex-basis legt fest, wie viel Platz ein Element normalerweise braucht.
Mit flex-shrink kann man bestimmen, wie stark ein Element kleiner wird, wenn der Platz knapp ist.

Es war auch spannend zu sehen, wie man mit Flexbox eine Navigation oder eine Galerie bauen kann, die auf allen Geräten gut aussieht. Das ist besonders praktisch, wenn man möchte, dass die Seite sowohl auf dem Handy als auch auf dem Computer gut funktioniert.

📌 Fazit¶

Ich habe gelernt, wann man Float, Grid oder Flexbox benutzt und wie man mit ihnen Layouts erstellt. Für moderne Layouts sind Grid und Flexbox meistens die besseren Optionen, weil sie viel flexibler sind. Grid ist gut, wenn man viele Bereiche in einem Raster anordnen möchte, während Flexbox ideal ist, um Elemente flexibel in einer Reihe oder Spalte zu platzieren.

Jetzt fühle ich mich sicherer im Umgang mit diesen Layout-Techniken. Es macht echt Spaß, mit CSS kreativ zu sein und zu sehen, wie man mit ein paar Zeilen Code die Anordnung der Elemente verändern kann. 😊