Loading TAILWIND::COSMOS...
“Flexbox coordinates one-dimensional layout along a Main Axis (row or col) and Cross Axis. Utilities like justify-*, items-*, gap-*, and flex-1 provide deterministic positioning for fluid UI components.”
Master main-axis vs cross-axis alignment, gap distribution, and flex-shrink/grow mechanics.
<div class="flex flex-col sm:flex-row items-center justify-between gap-6 p-6 rounded-xl bg-slate-900 border border-slate-800">
<div class="flex items-center gap-3 min-w-0">
<div class="w-10 h-10 rounded-full bg-cyan-500 flex-shrink-0" />
<div class="truncate">
<div class="font-bold text-white truncate">Long User Name That Truncates</div>
<div class="text-xs text-slate-400">active now</div>
</div>
</div>
<button class="flex-shrink-0 px-4 py-2 rounded-lg bg-cyan-500 text-black font-semibold">
Connect
</button>
</div>.flex { display: flex; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0px; }Apply "flex" to instantiate Flex Formatting Context
Set direction: "flex-row" (horizontal) or "flex-col" (vertical)
Align Main Axis with "justify-start | justify-center | justify-between"
Align Cross Axis with "items-start | items-center | items-stretch"
Distribute child expansion using "flex-1" or "flex-shrink-0"
Using "gap-*" instead of child margins eliminates the need for :last-child margin resets and prevents flex layout edge clipping.