Flexbox Playground
flex-direction
justify-content
align-items
flex-wrap
gap
Items (1–8)
4 items
1
2
3
4
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 0;
}
Flex Item Properties
| Property | Values | Description |
|---|---|---|
| flex-grow | 0, 1, 2… | How much the item grows relative to others |
| flex-shrink | 0, 1, 2… | How much it shrinks when space is tight |
| flex-basis | auto, 0, 200px… | Initial size before growing/shrinking |
| flex | 1 = 1 1 0% | Shorthand for grow, shrink, basis |
| align-self | auto, flex-start… | Override align-items for this item |
| order | 0, 1, -1… | Visual order (default 0) |