CSS flexbox generator

CSS flexbox generator: what it is for

Flexbox is the most common way to align items in a row or a column in CSS, but the property names confuse beginners.

Here you change each option in a selector and watch the items move instantly: direction, wrapping, distribution on the main axis, alignment on the cross axis, align-content and gap between items. The code shows only what changed from the default and warns you when a property has no effect with your other choices.

How to use

1. Choose the direction, alignment and wrapping options.
2. Adjust the gap, the number of items and the item that grows.
3. Copy the container CSS.

When to use it

• Centering an element on the screen.
• Building a menu or a row of buttons.
• Learning flexbox hands-on.

Frequently asked questions

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

justify-content distributes the items along the main axis (horizontal, if the direction is row) and align-items aligns them on the cross axis (vertical, in the same case). If you change the direction to column, the two switch axes.

When should I use flexbox and when grid?

Flexbox is for one dimension: a row of buttons, a menu, items that adjust to the space. Grid is for two dimensions at once, such as a gallery or the page layout. They can be used together.

What is gap for?

It adds space between items without margins at the edges, which used to require margins and selectors like :last-child. It works with flexbox in all current browsers.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools