Flexbox-Generator
justify, align, direction und wrap umschalten, live ansehen und das flex-CSS kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Ändere flex-direction, justify-content, align-items, flex-wrap und den Abstand (gap) per Dropdown und Regler und sieh die Flexbox-Ausrichtung in einer Live-Vorschau. Auch die Anzahl der Elemente ist einstellbar, und du kannst das flex-CSS kopieren, um es direkt in deinen Eltern-Container einzufügen.
Anleitung
- Wähle flex-direction und flex-wrap, um Richtung und Zeilenumbruch festzulegen.
- Richte die Elemente mit justify-content (Hauptachse) und align-items (Querachse) aus.
- Bring die Vorschau mit dem gap-Regler und der Anzahl der Elemente in die gewünschte Form.
- Kopiere das fertige CSS des Eltern-Containers und wende es auf dein echtes Layout an.
FAQ
- Ich verwechsle justify-content und align-items.
- justify-content richtet entlang der „Hauptachse (main axis)" aus. Bei flex-direction: row ist das die Waagerechte, bei column die Senkrechte. align-items richtet entlang der dazu senkrechten „Querachse (cross axis)" aus – änderst du die Richtung, tauschen beide Eigenschaften ihre Rolle.
- Das stretch von align-items ist in der Vorschau nicht zu sehen.
- stretch füllt die Querachse nur dann aus, wenn das Kindelement keine feste Höhe (oder Breite) hat. Die Elemente dieser Vorschau haben keine feste Höhe, daher wirkt stretch; mit center, flex-start usw. siehst du die Unterschiede in der Ausrichtung.
- Wohin füge ich das kopierte CSS ein?
- Die flex-Eigenschaften gehören nicht an die Kinder, sondern an das „Elternelement (den Container)", das die Kinder umschließt. Je nach Browser und Version kann das Rendering leicht abweichen, prüfe es daher in der echten Umgebung final ab.