Flexbox Online

Visual Flexbox Generator & Layout Playground

Class Names

Container

Item

Live Preview Click item to select
Flexbox Online
Generator & Calculator
The free CSS Flexbox generator, creator and visual calculator — build any layout instantly, then export clean CSS, nested SCSS or Tailwind utility classes.

CSS Flexbox Calculator
Flexbox Generator
Flexbox Creator
Online Flexbox Tool
Flexbox Layout Builder
flex-grow Calculator
SCSS Flexbox
Tailwind Flex Classes
01
Name Your Classes
Set a custom container class and item prefix. All generated output uses your exact names — paste-ready for your project.
02
Configure the Container
Adjust flex-direction, flex-wrap, justify-content, align-items, and row/column gap — the preview updates live.
03
Tune Each Item
Add up to 6 items. Select any one and control flex-grow, flex-shrink, flex-basis, align-self and order per item.
04
Export Your Format
Switch between CSS, nested SCSS, or a JSX-ready Tailwind class list. Hit Copy and paste straight into your codebase.
CSS Flexbox Properties Reference
Every property in this Flexbox generator — explained clearly for beginners and pros alike.
Container Properties
flex-direction
Sets the main axis: row (left→right), column (top→down), or their -reverse variants.
flex-wrap
Controls whether items wrap to new lines when they overflow the container width.
justify-content
Distributes items along the main axis — start, end, center, or space-between/around.
align-items
Aligns all items on the cross axis within a single line. Default: stretch.
align-content
Distributes multiple wrapped lines on the cross axis. Only applies when flex-wrap is active.
gap
Uniform spacing between items — cleaner than margin hacks. Supports row-gap and column-gap separately.
Item Properties
flex-grow
How much an item expands relative to siblings when extra space is available. Default: 0.
flex-shrink
How much an item contracts relative to siblings when space is limited. Default: 1.
flex-basis
An item’s starting size before grow/shrink math is applied. Accepts px, %, em, or auto.
align-self
Overrides the container’s align-items for one item only — great for one-off exceptions.
order
Controls visual display order without touching HTML. Lower values appear first. Default: 0.
When to Use This Flexbox Creator
Flexbox is a one-dimensional layout engine — perfect for rows and columns of content. Here are the most common real-world patterns:
🧭
Navigation Bars
Logo left, links right — achieved instantly with justify-content: space-between.
🃏
Card Rows
Responsive wrapping card grids using flex-wrap: wrap and a consistent gap.
⬛
Centered Content
Vertical + horizontal centering: justify-content and align-items: center.
📐
Sidebar Layouts
Fixed sidebar + fluid main content — set flex-grow: 1 on the main area.
🔘
Button Groups
Align icons with text, or space action buttons consistently using gap.
📝
Form Layouts
Label + input side-by-side, collapsing to column on mobile with flex-direction.
Frequently Asked Questions
What is Flexbox Online? +
Flexbox Online is a free browser-based CSS Flexbox generator and visual calculator. Adjust every container and item property using sliders and dropdowns, see the result instantly in the live preview, then copy production-ready CSS, SCSS, or Tailwind classes directly into your project — zero setup, zero sign-up required.
Can I use custom class names in the output? +
Yes. Type any valid CSS class name into the Container class field and your preferred prefix into Item prefix. All three output formats (CSS, SCSS, Tailwind) update immediately to use those names — so you can name it .nav-bar and nav-link and get code that matches your project’s conventions out of the box.
How does the SCSS output differ from plain CSS? +
The SCSS output nests all item rules inside the container selector using SCSS nesting syntax, and stores the gap values in $variables for easy global tweaks. The plain CSS output uses flat, standalone class selectors compatible with any project without a preprocessor.
What Tailwind classes does this Flexbox generator produce? +
The Tailwind tab maps each Flexbox property to the closest utility class — for example flex, flex-row, flex-wrap, justify-between, items-center, gap-4, grow, shrink-0, and order-2. For values without a direct Tailwind match (such as custom flex-basis sizes), it outputs an arbitrary-value class like basis-[120px].
What is the difference between justify-content and align-items? +
justify-content controls distribution along the main axis (horizontal when using flex-row). align-items controls alignment on the cross axis (vertical in a row layout). Used together they let you position flex items in both dimensions simultaneously — the classic “center everything” pattern is just justify-content: center; align-items: center.
When should I use Flexbox vs CSS Grid? +
Use Flexbox for one-dimensional layouts where content flows in a single row or column and items sizes are somewhat flexible. Use CSS Grid when you need simultaneous control over rows and columns — like page-level templates or complex multi-column grids. In practice they’re complementary: Grid for the macro layout, Flexbox for components within it.
Try also: CSS Specificity Calculator