CSS-Flexbox-Layoutcode mit Richtung und Abstand erzeugen

Flexbox-CSS gezielt vorbereiten

Der CSS-Flexbox-Generator unterstützt Sie dabei, einen CSS-Codeausschnitt für ein Flexbox-Layout vorzubereiten. Dafür legen Sie fünf Einstellungen fest: Richtung, Justierung, Ausrichtung, Umbruch und Abstand. Diese Auswahl ist sinnvoll, wenn Sie ein Layout-Grundgerüst für ein eigenes Stylesheet zusammenstellen möchten und die dafür vorgesehenen CSS-Deklarationen übersichtlich ausgeben lassen wollen.

Das Werkzeug erzeugt Code für die gewählten Einstellungen. Es zeigt jedoch keine gerenderte Layoutansicht und wendet die Ausgabe nicht selbst auf eine Seite an. Die erzeugte Ausgabe dient daher als Grundlage, die Sie anschließend in Ihrem eigenen Stylesheet einordnen und dort im Zusammenhang mit Ihrem konkreten Layout beurteilen.

CSS-Flexbox-Code erzeugen

1. Wählen Sie im Generator die Richtung für den Flexbox-Container aus. Legen Sie danach die Justierung, die Ausrichtung, den Umbruch und den Abstand fest. Verwenden Sie die Bezeichnungen und Schreibweisen, die für die jeweilige Konfiguration vorgesehen sind.

2. Prüfen Sie vor der Erzeugung, welche Werte tatsächlich eingesetzt werden sollen. Wenn Sie eine dieser Einstellungen nicht angeben, gelten die vorgesehenen Standardwerte: row für die Richtung, center für die Justierung, center für die Ausrichtung, nowrap für den Umbruch und 10 für den Abstand. So können Sie entweder gezielt nur einzelne Werte festlegen oder die vollständige Konfiguration bewusst auswählen.

3. Tragen Sie beim Abstand den gewünschten Wert ein. Im erzeugten CSS wird an den übergebenen Abstand der Suffix px angefügt. Wenn Sie beispielsweise 24 übergeben, ist die Form des ausgegebenen Abstands 24px. Die Ausgabe beschreibt damit den übergebenen Wert in der vorgesehenen CSS-Darstellung.

4. Starten Sie die Erzeugung des CSS-Codeausschnitts. Bei einer erfolgreichen Berechnung erhalten Sie den erzeugten Code zusammen mit den Angaben zur verwendeten Konfiguration. Der Ausschnitt enthält eine Flexbox-Deklaration sowie Deklarationen für Richtung, Justierung, Ausrichtung, Umbruch und Abstand.

5. Lesen Sie den Ausschnitt vor der Übernahme in Ihr eigenes Stylesheet durch. Achten Sie darauf, dass Richtung, Justierung, Ausrichtung und Umbruch in der gewünschten Schreibweise eingesetzt wurden. Der Generator nimmt diese Werte ohne einen separaten Umwandlungsschritt in den CSS-Code auf. Stimmen Eingaben nicht mit der gewünschten CSS-Schreibweise überein, sollten Sie sie deshalb vor der Erzeugung entsprechend anpassen.

6. Übernehmen Sie den erzeugten Ausschnitt anschließend in den passenden Bereich Ihres Stylesheets. Verwenden Sie die fünf vorgesehenen Konfigurationen, wenn Sie die Ausgabe steuern möchten. Zusätzliche Argumente verändern weder den erzeugten CSS-Code noch die gemeldeten Konfigurationswerte. Sie sind deshalb kein Ersatz für die Einstellungen zu Richtung, Justierung, Ausrichtung, Umbruch oder Abstand.

Das Ergebnis richtig einordnen

Beginnen Sie die Prüfung mit der Struktur des Ergebnisses. Der Codeausschnitt sollte eine Flexbox-Deklaration und eigene CSS-Angaben für Richtung, Justierung, Ausrichtung, Umbruch und Abstand enthalten. Dadurch können Sie nachvollziehen, welche fünf Einstellungen in die Ausgabe eingeflossen sind.

Prüfen Sie anschließend die Darstellung des Abstands. Der übergebene Wert erscheint mit px. Die übrigen Werte werden in die jeweils zugehörigen CSS-Deklarationen eingesetzt. Sie sollten daher nicht davon ausgehen, dass abweichende Schreibweisen automatisch korrigiert, vereinheitlicht oder auf ihre Eignung geprüft werden. Eine separate Umwandlung der Eingaben ist nicht beschrieben.

Ein erfolgreich erzeugtes Ergebnis bedeutet, dass der CSS-Code konstruiert und zusammen mit der verwendeten Konfiguration zurückgegeben wurde. Es bedeutet nicht, dass das Layout bereits visuell dargestellt oder auf eine Seite angewendet wurde. Ob die Kombination aus Richtung, Justierung, Ausrichtung, Umbruch und Abstand in Ihrem Projekt das gewünschte Verhalten ergibt, beurteilen Sie nach der Übernahme in Ihrer eigenen Entwicklungsumgebung.

Wenn Sie keine Werte angeben, können Sie das Ergebnis anhand der Standardkonfiguration einordnen: row, center, center, nowrap und 10. Haben Sie einzelne Werte übergeben, konzentriert sich die Kontrolle auf deren Schreibweise und auf die daraus gebildeten Deklarationen. Zusätzliche Argumente sollten Sie bei der Bewertung nicht als weitere Layoutoptionen interpretieren, weil sie die Ausgabe und die gemeldete Konfiguration nicht verändern.

Praktisches Beispiel

Sie möchten mehrere Karten in einer Zeile mit einem Abstand von 24 Pixeln anordnen und bereiten dafür den passenden Flexbox-Code vor.

Für eine Kartenzeile wählen Sie die Richtung row, die Justierung space-between, die Ausrichtung center, den Umbruch nowrap und den Abstand 24. Anschließend lassen Sie den CSS-Code erzeugen.

Das Ergebnis enthält eine Flexbox-Deklaration sowie einzelne CSS-Angaben für row, space-between, center, nowrap und den Abstand 24px.

Einschränkungen

• Die Ausgabe ist ein CSS-Codeausschnitt und keine gerenderte oder angewendete Layoutansicht. Die eingegebenen Werte werden ohne separate Umwandlung eingesetzt; eine Prüfung ihrer Eignung ist nicht beschrieben.

Häufige Fehler

• Ursache: Sie übergeben zusätzliche Argumente und erwarten dadurch eine weitere Layoutoption oder eine Änderung am erzeugten Code. Korrektur: Verwenden Sie die fünf vorgesehenen Einstellungen für Richtung, Justierung, Ausrichtung, Umbruch und Abstand, da zusätzliche Argumente den erzeugten CSS-Code und die gemeldeten Konfigurationswerte nicht verändern.

Häufige Fragen

Welche CSS-Angaben enthält das Ergebnis?

Das Ergebnis enthält eine Flexbox-Deklaration sowie CSS-Deklarationen für Richtung, Justierung, Ausrichtung, Umbruch und Abstand.

Welche Standardwerte gelten?

Wenn Sie keinen eigenen Wert festlegen, verwendet das Werkzeug row, center, center, nowrap und 10 für Richtung, Justierung, Ausrichtung, Umbruch und Abstand.

Wie wird der Abstand im CSS ausgegeben?

Wenn Sie einen Abstand übergeben, wird dieser Wert im CSS mit dem Suffix px ausgegeben. Die übrigen Eingaben werden in die zugehörigen CSS-Deklarationen eingesetzt.