HN: Playground zur Lösung von CSS-Flexbox-Schwierigkeiten

 (yoavsbg.github.io)
2 Punkte von GN⁺ 2025-01-06 | 1 Kommentare | Auf WhatsApp teilen

  • Ein Tool, mit dem du verschiedene Flex-Eigenschaften testen kannst, um zu verstehen, wie sie das Layout beeinflussen

  • Du kannst Änderungen in Echtzeit sehen und den erzeugten CSS-Code kopieren

  • flex-direction

    • row: ordnet die Elemente horizontal an
    • column: ordnet die Elemente vertikal an
    • row-reverse: ordnet die Elemente horizontal in umgekehrter Reihenfolge an
    • column-reverse: ordnet die Elemente vertikal in umgekehrter Reihenfolge an

  • justify-content

    • flex-start: richtet die Elemente am Startpunkt aus
    • center: richtet die Elemente in der Mitte aus
    • flex-end: richtet die Elemente am Endpunkt aus
    • space-between: lässt gleichmäßigen Abstand zwischen den Elementen
    • space-around: lässt gleichmäßigen Abstand um die Elemente herum

  • align-items

    • stretch: dehnt die Elemente aus
    • flex-start: richtet die Elemente am Startpunkt aus
    • center: richtet die Elemente in der Mitte aus
    • flex-end: richtet die Elemente am Endpunkt aus
    • baseline: richtet die Elemente an der Grundlinie aus

  • flex-wrap

    • nowrap: ordnet die Elemente in eine einzige Zeile
    • wrap: ordnet die Elemente über mehrere Zeilen hinweg
    • wrap-reverse: ordnet die Elemente über mehrere Zeilen hinweg in umgekehrter Reihenfolge

  • Beispielcode

    • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

  • Erstellt von

    • Erstellt von Yoav Sabag
    • Weitere Informationen findest du auf YouTube und GitHub

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-01-06
Hacker News Kommentar

  • Flexbox ist zwar einfach und leicht zu verstehen, aber die Namen der Eigenschaften und Werte sind nicht intuitiv

    • Namen wie justify-content und align-items sorgen für Verwirrung
    • Man muss mehrere Anläufe unternehmen, um Flexbox zu lernen

  • Empfohlen werden Flexboxfroggy.com und cssgridgarden.com

    • Diese Seiten sind nützlich, um Flexbox und CSS Grid zu lernen

  • Der Guide von Josh wird empfohlen

    • Er erklärt fortgeschrittene Tipps und Tricks zu Flexbox ausführlich
    • Er behandelt Konzepte wie flex-basis, auto margins und min-width

  • Er teilt seine Erfahrung mit dem Bau einer ähnlichen interaktiven Anleitung

    • Das hilft, das Wissen wieder aufzufrischen

  • Er argumentiert, dass main-axis-arrangement und cross-axis-alignment verständlichere Namen wären als justify-content und align-items

  • Er beklagt, dass er Flexbox korrekt zu verwenden hat

    • Er erwähnt, dass ihm Flexboxfroggy.com auch nicht geholfen hat

  • Es braucht interessante Herausforderungen, um CSS-Layouts zu üben

    • ChatGPT hilft bei der CSS-Fehlerbehebung, aber ein tiefes Verständnis von CSS ist erforderlich

  • Er findet, dass die Syntax von Flexbox und Grid eher beschreibend ist

    • Das Verständnis des Box-Modells und die Nutzung von Firefox Dev Tools helfen
    • Flexboxfroggy und cssgridgarden sind beim Üben nützlich
    • Er verweist oft auf die CSS-tricks-Cheat-Sheet

  • Er erwähnt, dass die Eigenschaften von Flexbox-Kindelementen ebenfalls wichtig sind

    • Es ist begrenzt, sich nur auf die vier Container-Eigenschaften zu konzentrieren

  • Er hat ein Cheat-Sheet für die Flexbox-Eigenschaften erstellt

    • Das kann auch für andere nützlich sein