CSS Flexbox Generator

Free tool No sign-up

Container

direction

wrap

Alignment

justify

align-items

align-content

Spacing & Items

gap8px

items5

1

2

3

4

5

Generated CSS

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

About this generator

Build CSS flexbox layouts visually — control direction, wrapping, alignment, and gap, then copy the output.

?

How to use

01

Set flex-direction

Choose row or column to set the main axis. Reverse variants flip the order of items without touching the HTML.

02

Toggle flex-wrap

nowrap keeps all items on one line. wrap lets items spill to a new line when they run out of space.

03

Justify along the main axis

justify-content controls how items are distributed along the main axis — start, center, end, or space options.

04

Align on the cross axis

align-items positions items on the perpendicular axis. stretch fills the container; baseline aligns text baselines.

05

Adjust gap

The gap property sets space between flex items on both axes — cleaner than using margins on individual items.

06

Copy the CSS

Hit "Copy CSS" to grab the full property block and paste it straight into your stylesheet.

</>

CSS Flexbox syntax

Property	Description
`flex-direction`	Defines the main axis: row (default) \| column \| row-reverse \| column-reverse.
`flex-wrap`	Controls whether items wrap to new lines: nowrap \| wrap \| wrap-reverse.
`justify-content`	Aligns items along the main axis: flex-start \| center \| flex-end \| space-between \| space-around \| space-evenly.
`align-items`	Aligns items on the cross axis for a single line: stretch \| flex-start \| center \| flex-end \| baseline.
`align-content`	Aligns wrapped lines on the cross axis (only applies when flex-wrap is enabled).
`gap`	Sets spacing between flex items. Shorthand for row-gap and column-gap.

</>

Flexbox snippets

Basic

display: flex;

Center

display: flex;
justify-content: center;
align-items: center;

Layout

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 16px;

✓

Browser support

flexbox has excellent browser support — safe to use in production without any fallback or prefix (IE 11 has partial support).

Chrome v29+

Firefox v28+

Safari v9+

Edge v12+

IE v11+

See it used in real designs

Browse hand-coded collections that put this tool to work.

Layouts22 examples

22 CSS Split Screen Layouts

Components22 examples

22 CSS Button Group Designs

Layouts23 examples

23 CSS Sidebar Layouts