Der Flex-Container
Im Flex-Container-Element muss mit display:flex; erst einmal die gewünschte Anzeigeart bestimmt werden. Diese Eigenschaft wirkt sich auf die enthaltenen Elemente (Flex-Items) aus. Als nächstes kann man festlegen, ob die Flex-Items nebeneinander (Horizontal = Hauptachse) oder untereinander (Vertikal = Querachse)) angeordnet werden sollen. Dafür verwendet man die Eigenschaft flex-direction: row; bzw. flex-direction: column; Die Eigenschaft flex-direction kann man auch mit der Kurzschreibweise flex-flow notieren. Mit der Eigenschaft flex-flow kann man sowohl flex-direction, als auch flex-wrap schreiben. Der Standardwert für flex-flow lautet:
#container { flex-flow:row nowrap; }
Container-Eigenschaften von Flexboxen
- display: flex oder display:inline-flex
- flex-direction / Standardwert: flex-direction: row
- flex-wrap / Standardwert: flex-wrap: nowrap
- flex-flow als Zusammenfassung für flex-direction und flex-wrap
Standardwert: flex-flow: row nowrap - justify-content / Standardwert: justify-content: flex-start
- align-items / Standardwert: align-items: stretch
- align-content / Standardwert: align-content: stretch