8 min read
2026-01-19
Flexbox is a CSS layout model that allows you to efficiently distribute space between elements and align them within a container.
Flex container — parent element with `display: flex`
Main axis — direction of placement of elements
Transverse axis — perpendicular to the main one
| Property | Values | Description |
|---|---|---|
| flex-direction | row, column | Axis direction |
| justify-content | center, space-between | Major axis alignment |
| align-items | center, stretch | Cross axis alignment |
| flex wrap | wrap, nowrap | Transferring elements |
| gap | px, rem | Spaces between elements |
`flex-grow` — stretch factor
`flex-shrink` — compression ratio
`flex-basis` — initial size
`align-self` - individual alignment
`order` — display order
Visually adjust Flexbox properties and see results instantly. Copy the finished CSS code.
See also: Grid Playground, CSS Minifier, Color Picker