Generate Tailwind CSS flexbox layouts visually. Set direction, wrap, justify, align, gap, and flex item sizing. Live preview with generated Tailwind code. Free browser tool.
Set flex direction (row, col, row-reverse, col-reverse).
Choose justify-content for main axis alignment.
Choose align-items for cross axis alignment.
Set gap between items.
Preview and copy the generated Tailwind flex classes.
Use flex items-center justify-center on the container. For full-screen centering: flex items-center justify-center min-h-screen.
flex-1 means the element will grow and shrink as needed, taking up all available space. It is equivalent to flex: 1 1 0%.
Use shrink-0 (flex-shrink: 0) on the item. Common use case: icons and logos next to text that should never compress.
Flexbox is the go-to layout system for one-dimensional layouts — arranging items in a row or a column. Tailwind makes it intuitive with utility classes that mirror the underlying CSS properties but with more concise naming.
<div class="flex"> <!-- display: flex -->
<div class="inline-flex"> <!-- display: inline-flex -->
<div class="flex flex-col"> <!-- column direction -->
<div class="flex flex-row"> <!-- row direction (default) -->
<div class="flex flex-row-reverse"> <!-- reverse row -->
<div class="flex flex-col-reverse"> <!-- reverse column -->
<div class="flex flex-wrap"> <!-- wrap to next line -->
<div class="flex flex-nowrap"> <!-- no wrap (default) -->
<div class="flex flex-wrap-reverse"> <!-- wrap in reverse -->
| Class | CSS |
|---|---|
justify-start | justify-content: flex-start |
justify-center | justify-content: center |
justify-end | justify-content: flex-end |
justify-between | justify-content: space-between |
justify-around | justify-content: space-around |
justify-evenly | justify-content: space-evenly |
| Class | CSS |
|---|---|
items-start | align-items: flex-start |
items-center | align-items: center |
items-end | align-items: flex-end |
items-stretch | align-items: stretch (default) |
items-baseline | align-items: baseline |
<div class="flex gap-4"> <!-- gap: 1rem on all sides -->
<div class="flex gap-x-4"> <!-- column gap only -->
<div class="flex gap-y-2"> <!-- row gap only -->
Gap is the modern replacement for margin hacks between flex items.
<!-- Grow to fill available space -->
<div class="flex-1"> <!-- flex: 1 1 0% -->
<div class="flex-auto"> <!-- flex: 1 1 auto -->
<!-- Don't grow or shrink -->
<div class="flex-none"> <!-- flex: none -->
<!-- Control individually -->
<div class="grow"> <!-- flex-grow: 1 -->
<div class="shrink-0"> <!-- flex-shrink: 0 (prevent shrinking) -->
Centered content (horizontal + vertical):
<div class="flex items-center justify-center h-screen">
Space between label and value:
<div class="flex items-center justify-between">
<span>Label</span>
<span>Value</span>
</div>
Sticky footer:
Looking for a more detailed deep-dive and advanced tips?
Read Full Article on our BlogYour data never leaves this device. All processing is handled locally by JavaScript.
We are currently building this tool. Check back shortly!