CSS Flexbox Generator — Visual Playground with Live Preview
Interactive CSS flexbox generator. Adjust flex-direction, justify-content, align-items, gap, wrap and per-item grow/shrink/basis/order with live preview. Copy production-ready CSS or Tailwind classes. 100% local.
Last updated:
Comments.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
}flex flex-wrap justify-start items-stretch content-stretch gap-3
Frequently Asked Questions
What's the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the direction of flex-direction), align-items controls the cross axis. In the default row direction, justify-content is horizontal and align-items is vertical; if you switch to column, they swap. This tool's preview updates instantly so you can see which axis each property affects.
When should I use flexbox vs grid?
Flexbox is one-dimensional — it lays items out in a single row or column and handles wrapping. Grid is two-dimensional — you define rows AND columns explicitly. Rule of thumb: navigation bars, button groups, and card content = flexbox. Page-level layouts, dashboards, and photo galleries = grid. They compose well; grid containers can hold flex containers and vice versa.
What does flex-basis: 0 vs flex-basis: auto do?
flex-basis is the starting size before flex-grow / flex-shrink kick in. With flex: 1 (which expands to 1 1 0), items divide the space evenly regardless of their content. With flex: auto (1 1 auto), items start at their content width and grow proportionally — items with more content get more space. Use 0 for equal columns, auto to respect content.
Are the generated Tailwind classes production-ready?
Yes. The tool emits standard Tailwind utilities (flex, flex-row, justify-between, items-center, gap-4, etc.). Non-standard gap values fall back to arbitrary-value syntax like gap-[13px]. Copy and paste directly into your JSX / template.
What is the gap property in flexbox?
gap sets the spacing between flex items — no need for margin hacks or last-child selectors. Supported in all major browsers since 2021. If you're targeting older Safari (< 14.1), fall back to margins.
Related Tools
cURL Converter
Convert cURL commands to Python (requests), JavaScript (fetch), Node.js, Go (net/http), PHP, or Java (HttpClient). Parses -H, -d, --data-urlencode, -F, -u, --json and more. 100% local.
URL Parser
Parse any URL into scheme, host, port, path, and query parameters — or build a URL from scratch with a form. Great for debugging redirect chains, tracking pixels, and OAuth flows. 100% local.
CIDR Calculator
Calculate IPv4 subnets from CIDR notation online. Get network address, broadcast, netmask, wildcard, usable host range, IP class, and binary representation. 100% local — nothing leaves your browser.
Color Converter
Convert colors between HEX, RGB, HSL, and HSV instantly. Includes a live color preview and copy-ready CSS strings.
Meta Tag Preview
Preview how your page will appear in Google search results and social share cards on Facebook, Twitter/X, and LinkedIn. Parses <title>, meta description, canonical, and full Open Graph / Twitter Card tags with diagnostics. 100% local.
HTML Minifier
Minify HTML by removing comments, collapsing whitespace, and stripping optional attribute quotes and void-element slashes. Reports byte savings. Preserves IE conditional comments and preformatted <pre> / <textarea> / <script> / <style> content. 100% local.