Softonic

CSS Flexbox Generator

Step 1 / 2 Generate CSS
Next

Flexbox is the go-to for one-dimensional layout: rows of cards, nav bars, centered heroes, forms. The container-and-item model is powerful, but its dozen properties interact in non-obvious ways. This generator takes the guesswork out of the container: pick flex-direction, justify-content, align-items, flex-wrap and gap, and get a clean CSS rule you can copy straight into your stylesheet.

How to generate the CSS

  1. 1

    Pick a direction

    Choose row, column or the reversed variants. This sets flex-direction, the axis the items flow along.

  2. 2

    Set justify-content

    Choose how items distribute along the main axis: start, center, space-between, space-around or end.

  3. 3

    Set align-items

    Choose how items align on the cross axis: stretch, start, center or end.

  4. 4

    Set gap and wrap

    Add spacing between items in pixels and decide whether items wrap onto a new line.

  5. 5

    Copy the CSS

    The generator outputs the container rule with all six properties, ready to paste into your stylesheet.

Container properties

Property Values Effect
flex-direction row / column / row-reverse / column-reverse Main axis
flex-wrap nowrap / wrap / wrap-reverse Whether items wrap
justify-content flex-start / center / flex-end / space-between / space-around / space-evenly Main-axis distribution
align-items flex-start / center / flex-end / baseline / stretch Cross-axis alignment of each line
align-content same values + space-between / space-around When wrapped, cross-axis distribution of lines
gap (row-gap, column-gap) length Spacing between items

Item properties

Property Values Effect
flex-grow 0+ (unitless) Share of leftover space to absorb
flex-shrink 0+ (unitless) Share of overflow to shrink
flex-basis length or auto Starting size before grow/shrink
flex shorthand (1 1 auto, etc.) All three at once
align-self auto / flex-start / center / flex-end / baseline / stretch Overrides align-items for one item
order integer Visual reorder without changing DOM

The flex: 1 trick

flex: 1 is shorthand for flex: 1 1 0%. It makes an item:

  • Grow to fill available space (grow: 1)
  • Shrink if necessary (shrink: 1)
  • Start from zero size (basis: 0%)

For equal-width columns, flex: 1 on every item gives perfect division. For sidebars that should not shrink below content, use flex: 0 0 240px (no grow, no shrink, 240px basis).

Common patterns

Centered hero

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar with logo left, links right

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* push right */
  display: flex;
  gap: 1rem;
}

Responsive card row

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum before wrapping */
}

Form field with button (input flexible, button fixed)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

  • Flexbox: one dimension (row OR column). Best when item sizes are content-driven or when you distribute space along a single line.
  • Grid: two dimensions (rows AND columns with explicit tracks). Best when the layout has row and column structure simultaneously.

For a nav bar or a stack of cards: Flexbox. For a product-card-grid with multiple rows of aligned cards: CSS Grid. Many real pages use both, a Grid page layout with Flexbox inside components.

Common gotchas

  • Items not filling the container: default align-items: stretch applies only if items have no fixed height. With explicit height, they stay at that size.
  • gap not working: check browser support. Flex gap landed late; Safari <14.1 did not support it. Now universal in 2024+.
  • Children of column flex collapsing: a flex column has align-items: stretch as default, which stretches items to container width. If one child sets a width, it breaks out.
  • order is visual only: screen readers and keyboard navigation follow DOM order. Do not use order to make content make sense; use it for visual polish only.

Frequently Asked Questions

Grid for two-dimensional page layouts (rows and columns together). Flexbox for one-dimensional distributions (nav bar, button row, stack). Inside a Grid cell, Flexbox for its internal layout. Most complex UIs use both.

Because flex-shrink default is 1 but min-width default is auto, which equals content width. Set min-width: 0 (or min-inline-size: 0) on the item to let it shrink below its intrinsic size.

display: flex; justify-content: center; align-items: center; on the container. Covers the vast majority of “center this thing” cases with two lines.

Yes, in all modern browsers. Safari was late (added in 14.1, April 2021); today every major browser supports it. Replace margin-based spacing with gap whenever you can, much simpler.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.