CSS Flexbox zu Tailwind – flex, flex-col, justify-between

display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.

Flex-Container lassen sich nahezu eins zu eins übertragen: display:flex wird flex, flex-direction:column wird flex-col und justify-content:space-between wird justify-between. Der spürbare Unterschied liegt bei den Abständen, denn gap:1rem wird zu gap-4 am Container statt zu verstreuten Margins. Ungewöhnliche Ausrichtungen sollten Sie trotzdem einzeln prüfen.

Display und Richtung

display:flex → flex; flex-direction:column → flex-col. Zuerst Container, dann Kinder.

Ausrichtung

justify-content:center → justify-center; align-items:center → items-center. Kurze Namen, gleiche Idee.

Gap vs. Margins

Bei gleichmäßigem Abstand lieber gap-4 am Container als Margin an jedem Kind.

Ausprobieren

Konverter öffnen

.example { display: flex; gap: 1rem; padding: 1rem; }

Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.