Flexbox Generator

Try flexbox settings on live boxes and copy the CSS.

How to Use Flexbox Generator

Pick a flex direction and whether items should wrap.
Choose how items are spaced along the line (justify-content) and across it (align-items).
Set the gap and the number of preview boxes.
Copy the CSS.

The settings in plain words

flex-direction sets the main line: row runs left to right, column runs top to bottom, and the reverse versions flip the order. justify-content spreads items along that line: packed at the start, centred, at the end, or with space between, around or evenly. align-items lines them up across the line: stretched to fill, at the start, centre or end, or by their text baseline. The preview boxes have different heights so you can see align-items working.

flex-wrap: wrap lets items move onto a new line when they run out of room instead of squeezing. Add more preview boxes to see it.

The centring recipe

To centre anything inside a container, use display: flex with justify-content: center and align-items: center. For vertical centring the container needs a height, for example min-height: 100vh for a full screen.

Key Features & Practical Use Cases

Centring something horizontally and vertically.
Navigation bars, button groups and toolbars.
Rows of cards that wrap onto new lines on small screens.
Learning flexbox by changing one setting at a time.

Frequently Asked Questions

How do I centre a div with flexbox?

On the parent, set display: flex, justify-content: center and align-items: center, and give it a height.

What's the difference between justify-content and align-items?

justify-content works along the flex direction; align-items works across it. Switching to column swaps which is horizontal.

What's the difference between space-around and space-evenly?

space-evenly makes every gap equal, including the edges. space-around gives the edges half-size gaps.

Is gap supported with flexbox?

Yes, in all current browsers.

About OneClickly

OneClickly is a set of 119 free tools for PDFs, images, text, everyday math and code. They run in your browser, so the files and text you work with stay on your device.

Related Tools

Color Picker & Converter - Pick a colour or type it as HEX, RGB or HSL and convert it to every other format.
CSS Gradient Generator - Design linear and radial CSS gradients with up to five colours and copy the code.
Box Shadow Generator - Adjust offset, blur, spread and colour with a live preview and copy the box-shadow CSS.
Color Contrast Checker - Check text and background colours against WCAG AA and AAA contrast levels.
Color Palette Generator - Generate random or harmonious five-colour palettes and lock the ones you like.
Border Radius Generator - Set each corner with a slider and copy the border-radius CSS.