YOUR CSS WORKBENCH
The Flexbox playground.
Arrange items along an axis. Change direction, share space, and watch the layout respond.
* { box-sizing: border-box; }
body { margin: 24px; font-family: Arial, sans-serif; background: #f8fafc; }
.container {
box-sizing: border-box;
width: 640px;
height: 320px;
padding: 16px;
font-family: Arial, sans-serif;
background: #ffffff;
color: #3730a3;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: stretch;
gap: 16px;
}
.item {
border: 1px solid #818cf8;
border-radius: 6px;
background: #e0e7ff;
padding: 16px;
min-height: 56px;
min-width: 0;
overflow-wrap: anywhere;
font: 600 14px Arial, sans-serif;
}
.item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 160px;
align-self: auto;
}Custom edits reset on refresh. Lesson and challenge progress is saved separately. The preview keeps its chosen width; scroll to explore larger layouts.
align-content needs wrapping and spare cross-axis space. It has no effect on a nowrap line. Wrap-reverse flips cross-start; reverse directions flip main-start.
A property reference
Direction and wrapping
Direction establishes the main axis. Reverse variants move main-start. Wrap allows new lines; wrap-reverse flips cross-start and the way lines stack.
Alignment and space
justify-content distributes main-axis free space. align-items places children across it. align-self overrides one item. align-content distributes wrapping lines when cross-axis space is available.
Sizing and gaps
Basis sets the starting main size; grow shares positive free space and shrink reduces sizes when needed. Gap inserts space between neighbors. Padding, borders, and minimums affect final dimensions.
Two experiments to try
01 / A centered card
Choose Centered card. One 160px-basis card is centered with justify-content and align-items. Change direction to column: the axes swap, but using both center values keeps the card centered.
02 / A line of cards
Choose Wrapping cards. Three 160px bases plus two 16px gaps use 512px, fitting in the 568px inner width. Four need 688px. Narrow the container to see a new line appear.
Watch out for…
align-content on nowrap, confusing gap with outer spacing, and assuming grow two means twice the final width. Content minimums and padding still matter.
Keep a useful result
Copy the active HTML or CSS view, or download a self-contained HTML example. Exports include typography, colors, padding, dimensions, and item sizing. Selection outlines and axis guides are presentation only.