A Flexbox in HTML is created by setting the display property to flex on a parent element and placing child elements inside it; the Flexbox Generator builds that exact CSS declaration block for the container from five closed-set properties plus a whole-pixel gap. The generator never accepts arbitrary style text, embedded HTML, raw selectors, or unit strings. Every keyword is validated against the W3C Flexbox and Box Alignment specifications and serialized into one fixed .container rule that contains display:flex plus the five configured properties. Because the preview and the copied CSS derive from the same validated typed state, the two representations cannot silently disagree. The tool runs entirely in the active browser tab, never uploads your settings or generated CSS, and never executes the result remotely. You decide which element receives the rule and which responsive or child rules you layer on top. This article walks through the HTML markup the rule pairs with, the five controls the tool exposes, the exact steps to build a safe container, and how to verify the preview before copying.
What a Flexbox Container Looks Like in HTML
Before the generator comes into the picture, the HTML markup that holds a Flexbox is small and predictable. You pick one parent element and any number of child elements that you want to align. The parent becomes the flex container, and each direct child becomes a flex item. The CSS that the generator produces targets only the parent; you write the children yourself.
A minimal HTML skeleton uses one parent element with the class container that wraps any number of child elements. The class name .container matches the selector the generator emits. You can rename it in your own stylesheet, but keeping it the same lets you paste the output verbatim. Items can be a div, article, li, button, or any other flow content — the layout engine does not care which element you choose, only that each one sits as a direct child of the container.
The generator intentionally focuses on the container rule, because container rules are where direction, wrapping, distribution, cross-axis alignment, and inter-item spacing are decided. Child rules, dimensions, and media queries are project-specific and belong in your own reviewed stylesheet, not in a generic container block.
The Five Controls the Generator Exposes
The Flexbox Generator exposes exactly five configuration fields plus one numeric gap. Every field accepts a closed list of keywords drawn from the W3C specifications, so the tool can validate them deterministically before either rendering the preview or serializing the output. The following table lists each control and the values it accepts.
| Control | CSS property | Accepted keyword values |
|---|---|---|
| Direction | flex-direction | row, row-reverse, column, column-reverse |
| Wrapping | flex-wrap | nowrap, wrap, wrap-reverse |
| Main-axis distribution | justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly |
| Cross-axis alignment | align-items | stretch, flex-start, flex-end, center, baseline |
| Inter-item gap | gap | Whole-pixel integer from 0 to 100, expressed in px |
The direction control is the most consequential choice because it establishes the main axis. A row makes the inline direction the main axis, so justify-content lays items out horizontally. A column makes the block direction the main axis, so the same justify-content value lays items out vertically. Wrapping decides whether items stay on a single line, form additional flex lines, or form lines in the reverse cross-axis direction. Cross-axis alignment positions items along the cross axis within each line and accepts baseline so that text rows line up regardless of font metrics. The gap field represents spacing between adjacent flex items and flex lines, accepts only whole-pixel values, and serializes with an explicit px unit. Negative numbers, decimals, scientific notation, unit text, leading-zero forms like 00, empty input, and values above 100 are all rejected by the parser rather than silently coerced.
Build the Container Step by Step
This is the core workflow. The order mirrors how the controls on the Flexbox Generator page are grouped, and every step uses the same validated values that the preview will then render.
- Open the Flexbox Generator in your browser. The page exposes five select fields and one numeric gap input, plus a fixed preview area showing five items.
- Pick the direction control. Start with row for a horizontal flow, or column for a vertical stack. The reverse variants mirror the order of items along the main axis.
- Pick wrapping. Use nowrap for a single line, wrap to allow new flex lines, or wrap-reverse for new lines in the reverse cross-axis direction.
- Pick main-axis distribution. The start, center, and end values group items at the start, middle, or end. The space-between, space-around, and space-evenly values distribute leftover space.
- Pick cross-axis alignment. Stretch makes items fill the cross-axis size; the start, center, and end values align them to the corresponding edge; baseline aligns text rows.
- Enter a whole-pixel gap from 0 to 100. Leave it at 0 for no spacing, or use 8, 12, 16, and 24 for typical rhythm values.
- Inspect the five-item preview. The preview updates only when every field is valid; an invalid gap or any state mismatch holds the preview in its previous state and surfaces the validation message.
- Click Generate CSS. The tool revalidates the complete current state, then emits a deterministic .container block with exactly six declarations in a fixed order.
- Copy the rule with the copy button or select the visible code manually. If the clipboard call fails, the CSS stays visible so you can still select and copy it by hand.
Any edit to a select or the gap immediately clears prior generated CSS, any prior validation error, and the copied confirmation, so you never read stale output against current settings.
What the Generated CSS Contains (and Skips)
The generator intentionally emits a small, predictable block. Knowing exactly what you get — and what you do not — protects you from inferring features the tool does not actually provide. The output always contains these six declarations, in this fixed order.
| Always included | Always excluded |
|---|---|
| display: flex | Vendor prefixes (-webkit-, -moz-, -ms-) |
| flex-direction (chosen value) | flex shorthand, flex-basis, flex-grow, flex-shrink |
| flex-wrap (chosen value) | order property |
| justify-content (chosen value) | align-content, place-content |
| align-items (chosen value) | Container dimensions, overflow, min/max sizes |
| gap (chosen value with explicit px) | Media queries, fallbacks, child selectors |
This makes the generator a safe starting point rather than a complete responsive layout system. Once the block is in your stylesheet, you add child rules, dimensions, responsive overrides, and writing-mode considerations on top. The closing brace of the .container block is always present, and the entire output is plain text that you can paste into any standard stylesheet without further processing. Per the MDN overview on basic flexbox concepts, these six declarations cover the most common container-level decisions; child-level behavior is documented separately on the same page.
Reading the Preview Before You Copy
The preview is a live, fixed five-item rendering built from the same validated typed settings that drive the generated CSS, with the gap explicitly expressed in pixels. Because both representations derive from one validated state, switching main-axis distribution from flex-start to space-between and then generating always yields a .container rule whose preview shows the items spread along the main axis.
The preview uses five fixed local items rather than imported markup or content, which keeps the relationship between the controls and the rendering easy to read. Item size, writing mode, container dimensions, and available space in a real page will still influence how the same declarations look in production, so treat the preview as a faithful but bounded reference. Editing any select or the gap immediately removes any prior generated CSS and any prior validation error from the screen; generating revalidates the complete current state before restoring output. Invalid enum state and invalid gap state surface their actual messages; invalid text never reaches the inline preview style or the copied CSS.
Putting the Generated CSS Into Your Own HTML
Once you have copied a rule, paste it into your project stylesheet and apply the .container class to the parent element in your HTML. A typical workflow looks like this: open the generator, configure the five controls and the gap, generate the rule, copy it, paste it below your existing resets in your main stylesheet, and assign the class. From there, write the child rules yourself. For buttons in a toolbar, scope those child rules under .container button, for example, and the cross-axis alignment you chose will keep them visually consistent.
Test the result with real content, real writing modes, real viewport sizes, browser zoom, and accessibility settings before shipping. If you want to iterate on the markup while previewing the CSS alongside it, you can edit HTML in a sandboxed preview and see the result without running scripts. The generator creates no file, Blob URL, remote stylesheet, or embedded frame, and the local processing means none of your settings or generated CSS is uploaded. Use the copied block as a trustworthy container starting point and build the responsive, project-specific rules around it.
For a deeper look, see An HTML Cleaner Alternative Built on the Browser Parser.