Flexbox Generator — simple
Generate CSS Flexbox layout code visually.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
How to use Flexbox Generator
Set Container Dimensions
Click the width and height input fields in the left panel and enter your desired container size in pixels or percentages. The preview panel on the right updates instantly to show your container with a blue border outline.
Configure Flexbox Properties
Select display direction from the 'flex-direction' dropdown (row, column, row-reverse, column-reverse). Then toggle 'flex-wrap' to on/off and choose 'justify-content' (flex-start, center, space-between, space-around, space-evenly) from the dropdown menus in the properties panel.
Adjust Alignment and Gap
Use the 'align-items' dropdown to align items vertically (flex-start, center, stretch, baseline). Set the gap value in pixels between flex items using the gap slider or input field. Watch the preview update in real-time.
Add and Customize Flex Items
Click the 'Add Item' button to insert flex children. Drag items in the preview to reorder them, or adjust individual item flex-grow, flex-shrink, and flex-basis values in the right sidebar. Items display with numbered labels and colored backgrounds.
Copy and Export Code
Click the 'Copy CSS' button to copy all generated code to your clipboard. The code includes container styles and item styles ready to paste into your CSS file or style tag. Use the 'Export HTML' button to download a complete HTML file with embedded styles.