About This Tool
CSS Flexbox Generator creates modern, standard Flexbox declarations for a container. The preview contains numbered items, and property changes apply immediately so you can compare alignment options.
How to Use
- Set flex-direction to choose the main-axis direction.
- Choose justify-content and align-items.
- Set flex-wrap and gap.
- Check the preview item positions, then copy the .container CSS.
Examples
- row with center can center items horizontally.
- column switches the main axis to a vertical direction.
- wrap allows additional lines when space is limited; nowrap keeps items on one line.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}How It Works & CSS Details
justify-content controls distribution along the main axis; align-items controls alignment along the cross axis. With row, the main axis is typically horizontal; column makes it vertical. flex-wrap determines whether items wrap when space runs out, and gap adds space between neighboring items or lines.
Common Uses
- Build navigation bars, button groups, and card layouts.
- Understand the main axis and cross axis.
- Compare space-between, space-around, and space-evenly.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
How do justify-content and align-items differ?
The first controls distribution along the main axis, while the second controls alignment along the cross axis. They do not always correspond to horizontal and vertical alignment.
How does flex-direction change the main axis?
row uses the row direction and column uses the column direction. Their reverse variants reverse item order along that axis.
When should I use flex-wrap?
Use wrap when items should not be squeezed onto one line and the container can accommodate multiple lines.
Can I use gap with Flexbox?
Yes. It sets spacing between items and lines. The output uses the standard gap property.