About the Flexbox Generator
A flex container lays out its children along a main axis, set by flex-direction, and a perpendicular cross axis. justify-content distributes free space along the main axis, align-items positions the items on the cross axis within their line, and align-content distributes the lines themselves, which is why it only has an effect when flex-wrap allows several lines. With flex-direction: column the axes swap, so justify-content then works vertically.
The size of an item starts from its flex-basis (or its width or content when the basis is auto). Free space is then shared in proportion to flex-grow, and a lack of space is taken away in proportion to flex-shrink multiplied by the basis. The initial value is flex: 0 1 auto: items shrink but do not grow. Beware of the shorthand: flex: 1 means 1 1 0%, which ignores the content size, whereas flex-grow: 1 keeps the basis at auto. An item never shrinks below its minimum content size unless it has min-width: 0.
gap adds space between items only, not at the edges, and replaces the old technique of margins with negative offsets. order changes the visual order without changing the DOM, so keyboard and screen reader order stay as written in the HTML: use it sparingly. The generated CSS lists only the declarations that differ from the initial values, and it writes flex-flow when both the direction and the wrapping are set.
How to use it
- Choose the direction, wrapping, justification and alignment of the container, and set the gaps.
- Add or remove items, and click an item in the preview to select it.
- Set flex-grow, flex-shrink, flex-basis, align-self and order of the selected item.
- Resize the container with the sliders or by dragging its corner to see how the items react.
- Copy the CSS and the HTML.