ToolXkit Icon

CSS Flexbox Generator

Set container and item properties, watch the layout, copy the CSS.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark

Live preview

A block-level flex container flowing items left to right, on a single line, shrinking rather than wrapping. Items are packed at the start horizontally, and stretched to fill vertically.

Click any box to edit that item on its own.

Container

displayflex takes the full width of its parent. inline-flex sits in a line of text, only as wide as its contents.
flex-directionWhich way items flow. This is the one that decides what "main axis" means for every control below.
flex-wrapWhether items move onto a second line when they run out of room, or shrink to stay on one.
justify-contentSpacing along the main axis — the direction items flow in. Right now that is horizontally.
align-itemsPosition across the other axis, applied to each line separately. Right now that is vertically.
align-content — no effect without wrapSpacing of the lines themselves. It has nothing to do until items actually wrap onto more than one line.
gapSpace held between items. Unlike a margin, it is not added on the outside edges.

Item 1 of 3

align-selfOverrides the container’s align-items for this one item.
order: 0Moves the item visually without touching the HTML. Lower numbers come first.
flex-grow: 0Share of the leftover space this item takes. 0 keeps its size; 1 means it absorbs the extra; 2 means twice as much as a sibling set to 1.
flex-shrink: 1How readily this item gives up width when there is not enough room. 0 refuses to shrink.
flex-basisThe size the item starts at, before growing or shrinking. auto means "whatever its content or width says".
width and heightA fixed size for this item. Leave blank for automatic.

A bare number is read as pixels; anything else is used as you typed it, so 50%, 12rem and min-content all work.

CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

HTML

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

How to Build a Flexbox Layout Visually

CSS Flexbox Generator: before and after TEXT A YOUR INPUT CSS FLEXBOXGENERATOR DONE A RESULT

Flexbox is the CSS layout tool behind most navigation bars, card rows and centred content, but its property names are easy to mix up. justify-content and align-items even swap directions when you switch to a column. This generator lets you set each property with buttons and watch numbered boxes move in a live preview.

Beneath the preview a plain sentence describes what the container is doing, and warnings appear when a setting cannot take effect, such as align-content on a row that never wraps. When the layout looks right, copy the CSS and the matching HTML.

No software to install Free Works on any device

Steps to Generate Flexbox CSS

  1. 1. Set up the container

    Choose display, flex-direction, flex-wrap, justify-content, align-items and align-content. Each control names the axis it is currently working on, so you know which way things will move.

  2. 2. Adjust the gaps

    Drag Row gap and Column gap, or tick Same gap in both directions to keep them equal. Gaps sit between items only, not around the outside.

  3. 3. Add and tune items

    Use Add item and Remove selected to change how many boxes there are. Tapping a numbered box makes it the current item, whose grow, shrink, basis, align-self, order, width and height you can then change.

  4. 4. Read the notes

    The sentence under the preview explains the layout in words, and amber notes point out settings that are being ignored and why.

  5. 5. Copy the code

    Each code block, CSS and HTML, has its own Copy and Download buttons. Reset returns everything to the starting layout if you want to begin again.

Try it now

What Is CSS Flexbox?

Flexbox, short for the Flexible Box Layout, arranges items in a single row or column and shares out the spare space between them. The container decides the direction, wrapping and alignment; each item can grow, shrink or move itself out of order. It is ideal for one-dimensional layouts, while CSS Grid suits full two-dimensional page grids.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Flexbox Generator Covers

Every container property

display, direction, wrap, justify-content, align-items, align-content and separate row and column gaps.

Per-item settings

flex-grow, flex-shrink, flex-basis, align-self, order, width and height for whichever box you select.

Plain-English summary

A sentence such as “flowing items left to right, centred vertically” describes the current layout.

Conflict warnings

Notes explain when a property has no effect, for example spacing that cannot apply because an item is set to grow.

Minimal CSS and HTML

Only properties that differ from the browser default are printed, with no outdated vendor prefixes.

Why Use ToolXkit for CSS Flexbox Generator?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Flexbox Layouts

  1. To centre something both ways, set justify-content and align-items to center on the container. That is the classic one-line fix.

  2. Switch direction to column and watch justify-content start working vertically. The notes under each control change to match.

  3. Give one item flex-grow 1 to push its neighbours to the far edges, which is handy for a logo on the left and links on the right.

  4. Use gap instead of margins between items. It never adds space on the outer edges, so rows line up cleanly.

  5. Width and height fields accept 50%, 12rem or min-content; a bare number is read as pixels.

Frequently Asked Questions

Answers to common questions about this tool.

What is the difference between justify-content and align-items?

justify-content spaces items along the main axis, the direction they flow. align-items positions them across the other axis. In a row, justify-content works left to right and align-items works top to bottom; in a column they swap.

Why is align-content not doing anything?

align-content spaces the lines of a wrapping container. With flex-wrap set to nowrap there is only one line, so it has nothing to arrange. Set wrap to wrap and add enough items to fill more than one line.

What does flex-grow 1 mean?

It tells an item to take a share of any leftover space. If one item has 1 and the others have 0, that item takes all the spare room. Two items at 1 share it equally; an item at 2 gets twice the share.

Should I use flexbox or grid?

Use flexbox for a single row or column, such as a menu, a toolbar or a row of cards that can wrap. Use grid when you need rows and columns lined up together, like a full page layout or a photo gallery.

Does the generated code need vendor prefixes?

No. Every current browser has supported unprefixed flexbox for about ten years, so the output leaves -webkit- lines out to keep it short and readable.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is CSS Flexbox Generator free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use CSS Flexbox Generator?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools