Will man eine flexible und anpassungsfähige Webseite erstellen, sollte man sich unbedingt das CSS3 Flexbox-Modell anschauen.
Hier zeige ich anhand eines einfachen Beispiels wie es funktioniert und gebe Links zu hilfreichen Webseiten.
Wichtig: Flexbox wird nicht für das eigentliche Layout verwendet, sondern nur für die HTML-Elemente im Layout drinnen.
Flexbox ist einfach zu verwenden weil man damit keine CSS-Einstellungen wie position, float und clear mehr braucht. Leider wird Flexbox nicht von alten Browser-Versionen unterstützt, hier klicken um zu erfahren welche Browser-Versionen Flexbox unterstützen.
Zum Beispiel
Ich erstelle eine Webseite mit 6 Div-Container. Diese 6 Div-Container platziere ich in einen Flex-Container (der Flex-Container wird im CSS-Code mittels display:flex; bestimmt), dadurch werden diese 6 Div-Container zu Flex-Elemente. Das ist schon alles was man machen muss und nun kann man diesen 6 Div-Containern Flex-Eigenschaften vergeben.
Erklärung zum CSS-Code:
- display: flex; - Bestimmt den Flex-Container.
- flex-direction:row; - Die Flex-Elemente werden in einer Reihe von links nach rechts angeordnet.
- flex-wrap: wrap; - Die Flex-Elemente passen sich an der Breite des Flex-Containers an und wenn es nicht genügend Platz hat bilden sie eine neue Reihe.
- justify-content: space-around; - Die Flex-Elemente werden mit gleichen Abstand zwischen den Elementen verteilt.
- align-content: center; - Die Flex-Elemente werden zentriert.
Weitere Informationen mit Beispielen zu Flexbox und den Flex-Eigenschaften:
https://www.w3.org/TR/css-flexbox-1/
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
https://www.w3schools.com/css/css3_flexbox.asp
http://www.css-wiki.com/listings/flexbox.html
Kommentar eingeben