Mit Flexbox können wir unkompliziert variable und responsive Layouts erzeugen. Das Modell arbeitet mit zwei Achsen (horizontale und vertikale) auf denen Inhalte verteilt werden können. Im engl. Hauptachse (main axis) und Querachse (cross axis). Tatsächlich ist es einfacher, wenn wir uns an der "Hauptachse" orientieren. Da wir an dieser immer ausrichten. Bei direction:row ist x - die Hauptachse, bei direction:column wird y - zur Hauptachse.
Elternteil ist unser flex-container, in welchem wir mit folgenden properies bestimmen können, wie sich dessen Kinder (boxen / flex-items) verhalten sollen
.flex-container{
display:flex;
flex-direction: row (default) |row-reverse | column | column-reverse;
justify-content:flex-start (default) | flex-end | center | space-between | space-around | space-evenly | start | end;
align-items:stretch (default) | flex-start | flex-end | center | baseline;
flex-wrap: nowrap | wrap | wrap-reverse
}
bei flex-direction:row mit:
justify-content:(richtet die Kinder auf der x-Achse (main axis) aus => Bild 1)align-items:(richtet die Kinder auf der y-Achse aus => Bild 2)
<-- x (main axis)
<-- y
❗❗❗ ACHTUNG bei flex-direction:column drehen sich die Befehle für die Ausrichtung mit. Es übernimmt:
justify-content die y-Achse (nun die main-axis) und
align-items die x-Achse.
👉alignment main-axis abhängig von der flex-direction
Der default Wert ist no-wrap, das heißt, das alle Kinder des flex-containers bei direction:row z.b. in eine Reihe gequetscht werden und dabei unter Umständen ihre Orginalbreite verlieren können, um das zu verhinden, können wir dem Elternelement sagen
flex-wrap:wrapmehr Lesematerial
👉selfhtml flexbox deutsch
👉flexbox help
👉flexbox-aligning with auto margins
👉flexbox tutorial
👉flexbox tutorial css-tricks
👉flexbox cheatsheet
👉interaktiver flexbox playground
👉freecodecamp flexbox mit animierten gifs
CSS Game