100% PrivateFree
Preview
1
2
3

Click an item to edit its properties

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

How It Works

1

Configure Container

Set flex-direction, justify-content, align-items, flex-wrap, and gap for the container.

2

Adjust Items

Click any item to modify its flex-grow, flex-shrink, and order properties.

3

Copy CSS

Copy the generated CSS for both the container and individual items.

Frequently Asked Questions

What is CSS Flexbox?
Flexbox is a CSS layout model that distributes space among items in a container. It handles alignment, direction, ordering, and sizing of child elements along a single axis.
When should I use Flexbox vs Grid?
Use Flexbox for one-dimensional layouts (row or column). Use Grid for two-dimensional layouts (rows and columns simultaneously). They can be combined in the same project.
What does justify-content do?
justify-content aligns flex items along the main axis (horizontal by default). Values like center, space-between, and space-around control how extra space is distributed.
What does align-items do?
align-items aligns flex items along the cross axis (vertical by default). Common values are stretch (default), center, flex-start, and flex-end.
What is flex-grow?
flex-grow defines how much a flex item should grow relative to other items when extra space is available. A value of 0 means it will not grow, while 1 means it takes its share of remaining space.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools