Flexbox Generator
Experiment with flex-direction, flex-wrap, justify-content, align-items and gap on a live preview, and copy the container CSS.
Free · No sign-up · Your inputs stay in your browser
Input
Build a flexbox layout
Output
CSS
143 characters
justify-content works along the main axis, which flex-direction sets, and align-items across it; switching to column swaps what the two do, which is the usual source of confusion. gap replaced the old margin tricks and is supported in flex layouts by every current browser.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
Main axis and cross axis
justify-content distributes items along the main axis, which flex-direction sets, and align-items aligns them across it. Switch to column and the two swap roles, which is the usual source of "centering does not work". MDN's flexbox basics walks through both axes.
gap replaced margins
The gap property sets space between flex items without margin hacks on first or last children, and is supported in flex layouts by every current browser. For two-dimensional layouts, rows and columns at once, grid is usually simpler.