Flexbox Generator
Toggle justify, align, direction, and wrap with a live preview and copy the flex CSS
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Change flex-direction, justify-content, align-items, flex-wrap, and gap with dropdowns and sliders to see flexbox alignment in a live preview. You can also adjust the number of items and copy flex CSS ready to paste onto your parent container.
How to use
- Choose flex-direction and flex-wrap to set the layout direction and wrapping.
- Align items with justify-content (main axis) and align-items (cross axis).
- Refine the preview to the shape you want with the gap slider and item count.
- Copy the finished parent-container CSS and apply it to your real layout.
FAQ
- I keep confusing justify-content and align-items.
- justify-content aligns along the main axis. When flex-direction is row, the main axis is horizontal; when it's column, it's vertical. align-items aligns along the perpendicular cross axis, so changing the direction swaps the two properties' roles.
- The stretch value of align-items doesn't show in the preview.
- stretch only fills the cross axis when the children have no fixed height (or width). The items in this preview have no set height, so stretch works; switch to center, flex-start, and so on to see the alignment differences.
- Where do I paste the copied CSS?
- Flex properties apply to the parent (container) that wraps the children, not to the children themselves. Note that rendering can vary slightly by browser and version, so do a final check in your real environment before using it.