Loading Shrinkify...
Loading Shrinkify...
Configure flex direction, alignment, wrapping, and spacing with instant CSS output.
All processing runs locally in your browser. Generated CSS is never uploaded.
Flexbox is the tool of choice for single-axis alignment. The Flexbox Generator lets you tune justify-content, align-items, flex-direction, wrap, and gap visually — outputting clean flex container and item CSS instantly.
Use Flex for one-directional layout (nav rows, button groups, inline elements). Use Grid when both rows and columns need simultaneous control.
Need two-dimensional layout? Pair with CSS Grid Generator.
Centering both horizontally and vertically: display:flex; justify-content:center; align-items:center on the container.
Allows items to wrap to the next line when they exceed container width. Without it, items shrink to fit on a single line.
A ratio that divides remaining space among items. flex-grow:2 on one item and flex-grow:1 on another gives the first twice the extra space.
Check out our technical guides to learn more about how browser-side processing works.
Read Glossary