About Flexbox Playground
Flexbox is a one-dimensional CSS layout model that places items along a main axis and aligns them on the cross axis. In this playground, flex-direction sets the main axis, justify-content distributes items along it, align-items positions them across it, and flex-wrap lets items move to a new line. The preview container is 220 pixels tall so vertical alignment is visible. Per-item properties such as flex-grow and order are not included.
How to use Flexbox Playground
- Fill in "flex-direction", "justify-content", "align-items" and "flex-wrap", and the other options.
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about Flexbox Playground
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis, which is horizontal for row and vertical for column. align-items positions them on the cross axis, at a right angle to the main axis. Changing flex-direction swaps which way each one works.
Runs in your browser. Page last updated .