Zeile oder Spalte

Als Nächstes kommen die drei Schritte im Bereich „So adoptierst du“. Die Liste mit ihnen (das ol-Element) ist ein Flex-Container mit den Klassen flex gap-6, die Schritte stehen also nebeneinander in einer Zeile. Auf einem Smartphone wird jeder Schritt in eine schmale Spalte gequetscht, mit ein, zwei Wörtern pro Zeile.

Auf einem Smartphone sollen die Schritte untereinander stehen und ab einem Tablet nebeneinander. Die Klasse flex-col kennst du aus der Lektion über Flexbox, Grid und Position: Es ist flex-direction: column. Ihr Gegenstück ist flex-row, also flex-direction: row, was ein Flex-Container standardmäßig hat. Mobile First sind die Schritte zuerst eine Spalte und ab md: eine Zeile:

<ol class="flex flex-col md:flex-row">

Das Paar flex-col md:flex-row gehört zu den häufigsten in Tailwind. Du nutzt es für alles, was auf einem Computer nebeneinander und auf einem Smartphone untereinander stehen soll: ein Bild neben einem Text, ein Menü neben dem Inhalt, ein Feld neben seinem Button.

Der Abstand, den gap-6 festlegt, gilt in beide Richtungen: zwischen den Schritten in einer Zeile genauso wie in einer Spalte.