Über das geniale Flexbox Modell für Homepage Design Newbies
Damit das Flexbox Modell für dich als Anfänger übersichtlich bleibt wird bei dieser Vorstellung auf die visuellen Darstellung fokussiert. Du bekommst drei verschiedene Flexbox Grundeinstellungen gezeigt bzw. beschrieben, die eine Homepage enthalten kann. Zuvor jedoch zwei wichtige Details, die du über Flexbox wissen solltest.
Vereinfachung vom Homepage Design
Das Schöne am Flexbox Modell ist, dass hierdurch das Webdesign für PCs erheblich vereinfacht werden kann. Dies gilt Überdies natürlich ebenfalls für Smartphones und anderen Geräten. So gibt es selbst für HTML/CSS Einsteiger weniger Hürden. Das Resultat: eine enorme Erleichterung und Zeitersparnis ist bei der Kreation und der Wartung einer Homepage möglich.
Kompatibilität mit Browsern
Hinzu es gut zu wissen, das das noch relativ neue Flexbox Modell von allen modernen Browsern unterstützt wird. Selbst Windows 7 & 8 Nutzer können seit Juni 2020 Flexbox Homepages im neuen Edge Browser sehen. Somit ist davon auszugehen, das Besucher bei einer Flexbox Homepage ein gutes visuelles Nutzererlebnis haben werden.
Nun zu den Grundlagen von Flexbox
Es gibt unterschiedliche Grundeinstellungen. Ich zeige anhand von nur drei Grundeinstellungen, wie das Flexbox Modell funktioniert. Am Einfachsten zu verstehen ist die visuelle Darstellung der Elemente einer Homepage durch Boxen. Die Boxen enthalten später Inhalte, also beispielsweise Text oder Bilder.
1. Feste Elemente
Alle Elemente haben die gleiche oder ein bestimmte Größe. Die Boxen sind horizontal nebeneinander und auf der linken Seite in einer Reihe platziert. Das ist der Default bzw. die Grundeinstellung von Flexible Boxes bei festen Elementen.
2. Flexible Elemente
In dieser zweiten Variante sind die Boxen in ihrer Breite und Höhe unbegrenzt. Sie werden dadurch flexibel. Die Boxen passen sich daher dynamisch dem verfügbaren Raum an. Das ist der Default für flexible Boxen.
3. Vertikaler Smartphone Bildschirm
Beide vorherigen Beispiele gingen von einem horizontalen Darstellung in Reihen aus. Beim Smartphone kann beim vertikal gehaltenen Bildschirm horizontal wenig Platz verfügbar sein. Das Flexbox Modell hat hierfür eine weitere Grundeinstellung vorgesehen. So werden die Boxen von 1./2. um 90 Grad oder ¼ gedreht und in einer Spalte angeordnet. Das hier gezeigte Beispiel geht von flexiblen Boxen aus (2.), da sie den gesamten horizontalen Raum (Breite) einnehmen.
Wie es weiter geht...
Das war jetzt eine kurze Vorstellung vom Flexbox Modell. Neben diesen Grundeinstellungen gibt es noch weitere Optionen, um Inhalte auf einer Seite zu arrangieren.
Wenn du noch mehr über dieses Thema wissen möchtest oder Flexbox für deine Homepage einsetzen willst, dann empfehle ich dir an dieser Stelle den extra dafür von mir entwickelten Flexbox Homepage Design Video Kurs. Du bist damit in der Lage unabhängig dein Homepage Design zu kreieren.
Der Video Kurs zeigt dir ausführlich, wie durch Flexbox und einer bestimmten Methode Inhalte auf einer Homepage beliebig platziert werden. Der Kurs eignet sich sowohl für Anfänger und Fortgeschrittene. Mit dem Video Kurs bekommst du nicht nur ein E-Handbuch sondern auch ein optimiertes Framework für einfache Umsetzung und schnelle Resultate.
Autor/in: Iris Mitlacher