Loading...
Visually design flexbox layouts with live preview
Flexbox is a CSS layout model that distributes space and aligns items within a container along a single axis. It simplifies responsive layout design with properties like justify-content and align-items.
Click on an item above to edit its properties
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 16px;
| Property | Description |
|---|---|
| flex-direction | Main axis direction (row/column) |
| justify-content | Align items along main axis |
| align-items | Align items along cross axis |
| flex-wrap | Allow items to wrap to new lines |
| gap | Space between flex items |
| flex | Shorthand: grow shrink basis |
Formula
flex: flex-grow flex-shrink flex-basisflex-direction = sets the main axis, which is what justify-content then acts along
justify-content = distributes space along the main axis
align-items = positions items across the cross axis
flex-basis = the size an item starts at before growing or shrinking, and auto means read the width or height
Did you know? flex: 1 is shorthand for 1 1 0%, not 1 1 auto. The zero basis is why equal flex children come out the same width regardless of their content, and swapping in auto is what makes them size to their content instead.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.