Aus dem Kurs: CSS: Layouten per Flexbox

Flex-Container, Flex-Items und ein neues Box-Modell – Tutorial zu CSS

Aus dem Kurs: CSS: Layouten per Flexbox

Gratismonat starten

Flex-Container, Flex-Items und ein neues Box-Modell

“

Die Flexbox kommt mit komplett eigenem Box-Modell und neuen Begriffen, wie z. B. Flex-Container und Flex-Items. Und da das Wort Flex dort häufiger auftaucht, möchte ich Ihnen das zunächst einmal erklären. Denn im Deutschen kommt man bei dem Begriff Flex leicht auf eine falsche Fährte. Wenn das eine Flex ist, dann könnte man den Koffer in dem das ganze steckt als Flexbox sehen. Das ist aber mitnichten so. Denn Flex ist Englisch, und heißt auf Deutsch so viel wie biegen. Es gibt noch ein Paar weitere Übersetzungen die sehr hilfreich sind, denn es gibt nicht nur das Verb Flex, biegen, flexible, Sondern es gibt auch das Substantiv, und dort heißt es soviel wie Kabel oder Schnur, und andere Entsprechung sind z. B. line, oder cable, oder wire. Und das trifft den Sachverhalt beim Gestalten von Webseiten mit Flexbox schon wesentlich besser. Eine Flex ist also einfach nur eine Linie, die in einer Flexbox sitzt, einem Rechteck drumrum. Das hilft Ihnen wesentlich weiter beim Verstehen von Layouten mit der Flexbox. Das Flex Ding ist eine Linie, drumrum ist eine Flexbox, und die nennen wir nicht Flexbox, sondern Flex-Container. Diese Linie hat eine Richtung, und sie heißt Main axis, oder auf Deutsch Hauptachse. Und entlang dieser Hauptachse werden die Kindelemente des Flex-Containers ausgerichtet, nämlich die Flex-Items. Das können beliebig viele sein, ein, zwei, drei oder viele. Die können unterschiedliche Größen haben, unterschiedliche Breiten und unterschiedliche Höhen. Und es gibt, um das Ganze zu komplettieren, nicht nur eine Hauptachse, sondern auch noch eine Querachse, die immer im rechten Winkel zur Hauptachse steht. Das sind die wichtigsten Begrifflichkeiten, Flex-Container, Flex-Item, Main axis und cross axis. Ich werde von Hauptaktion Querachse sprechen, weil die deutschen Begriffe recht eingängig sind. in vielen Fällen, wenn es zu Missverständnissen führen kann, dann bleibe ich bei den englischen Begriffen Main axis und cross axis. Flex-Container und Flex-Item, das wird gar nicht übersetzt, das bleibt so. Was Sie hier vor sich sehen sind die Grundzüge des Box-Modells für die Flexbox. Und komplett ausgestaltet ist hier das offizielle Box-Modell sowie es beim World Wide Web Konsortium in der Der Spezifikation steht. Sie erkennen die Begriffe wieder, Flex-Container in dunkelgrau, Flex-Item in hellgrau. Mit verschiedenen Breiten hier in diesem Fall. Und die Main axis mit einem Anfangspunkt namens Main Start, und einem Endpunkt namens Main end, der dann hier ist. Und die cross axis hat genau dasselbe cross Start und cross end. Den siehen Sie hier. Dann gibt es noch die Main size. Das ist in diesem Falle die Breite der Hauptachse, und die cross size. Das ist in diesem Falle die Länge der Querachse. Das ist das offizielle Box-Modell. Die wichtigsten Begriffe, wie gesagt, Flex-Container, Flex-Item, Main axis und cross axis.

Inhalt