Ich muss zugeben, ich bin einer der Glücklichen, die eine Welt ohne FlexBox gar nicht kennen. Für mich ist dieses kleine Wunderwerkzeug, das so einfach funktioniert und noch dazu responsiv ist, ein Muss in der heutigen Web-Welt.
Als Elementor letztes Jahr ankündigte, dass sie von Containern zu FlexBox-Containern wechseln würden, war ich erleichtert. Ich musste so viele einfache Darstellungsprobleme in Elementor mit display: flex; lösen. Oh je!
Allerdings habe ich bemerkt, dass nicht jeder den Wechsel genauso gut mitbekommen hat. Ich sehe immer noch zu viele Projekte, bei denen die Container missverstanden werden. Für mich als Entwickler hat es Elementor leicht gemacht. Sie haben die Einstellungsoptionen genauso benannt wie sie vorher mit CSS waren.
Aber leider (oder glücklicherweise) sind wir nicht alle Entwickler.
Also schnall dich an und lass uns flexen!
Schritt 1: Aktiviere den FlexBox Modus in Elementor
Um FlexBox in Elementor zu nutzen, musst du zunächst den FlexBox Modus aktivieren. Das geht ganz einfach:
- Öffne den Elementor Editor und wähle eine beliebige Sektion aus.
- Gehe zum Layout Tab und klicke auf den Schalter neben „Flexbox“.
- Voilà! Du hast den FlexBox Modus aktiviert.
Jetzt kannst du die verschiedenen FlexBox Eigenschaften für deine Sektion einstellen. Dazu gehören:
- Die Ausrichtung der Inhalte (justify-content)
- Die Ausrichtung der Elemente (align-items)
- Die Ausrichtung der Spalten (align-content)
- Die Reihenfolge der Spalten (order)
- Die Grösse der Spalten (flex-grow, flex-shrink, flex-basis)
Schritt 2: Spiele mit den FlexBox Eigenschaften herum
Jetzt kommt der lustige Teil. Du kannst mit den verschiedenen FlexBox Eigenschaften herumspielen und sehen, wie sie sich auf deine Website auswirken.
Zum Beispiel kannst du
- die Ausrichtung der Inhalte ändern, um sie linksbündig, rechtsbündig, zentriert oder verteilt anzuzeigen.
- die Ausrichtung der Elemente ändern, um sie oben, unten, mittig oder gestreckt anzuzeigen.
- die Ausrichtung der Elemente ändern, um sie oben, unten, mittig oder gestreckt anzuzeigen.
- die Ausrichtung der Spalten ändern, um sie zusammenzuziehen oder auseinanderzuziehen.
- die Reihenfolge der Spalten ändern, um sie nach vorne oder nach hinten zu bringen.
- die Grösse der Spalten ändern, um sie grösser oder kleiner zu machen.
Die Möglichkeiten sind endlos!
Wenn du willst ist hier einer meiner Go To Websites für FlexBox Eigenschaften: CSS Tricks. Hier wird alles mit Bildern super intuitiv erklärt.
Schritt 3: Erstelle coole Layouts mit FlexBox
Jetzt bist du bereit, coole Layouts mit FlexBox zu erstellen. Du kannst deiner Kreativität freien Lauf lassen und verschiedene Kombinationen von FlexBox Eigenschaften ausprobieren.
Du siehst, mit FlexBox kannst du alles machen!
Fazit
FlexBox ist eine tolle Sache, die dir erlaubt, flexible und responsive Layouts für deine Website zu erstellen. Mit Elementor hast du die Möglichkeit, FlexBox einfach und intuitiv zu nutzen. Du musst nur den FlexBox Modus aktivieren und die verschiedenen FlexBox Eigenschaften einstellen. Dann kannst du mit ihnen herumspielen und coole Layouts kreieren. Und das alles mit einem Lächeln im Gesicht!
Ich hoffe, dieser Blog Post hat dir gefallen und dich zum Lachen gebracht. Wenn ja, dann teile ihn gerne mit deinen Freunden und Kollegen. Und wenn du noch Fragen oder Anregungen hast, dann hinterlasse mir gerne einen Kommentar.
Bis zum nächsten Mal!
Dein Flex-Freund
Über mich
