Configure flex container and item properties visually and copy the generated CSS.
Container Properties
Items — click a row to select, then edit properties
flex-growflex-shrinkflex-basis
Live Preview
Generated CSS
About CSS Flexbox
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout system that makes it easy to arrange items in a row or column, distribute space, and align content. It is supported in all modern browsers.
Container vs. item properties
Container properties are applied to the parent element (display: flex). They control the direction, wrapping, and distribution of child items.
Item properties (flex-grow, flex-shrink, flex-basis) are applied to individual children and control how each item sizes itself relative to the available space.
The shorthand flex: grow shrink basis (e.g. flex: 1 1 auto) is the recommended way to set all three at once.
Frequently asked questions
What is flex-grow?
flex-grow defines how much a flex item should grow relative to the other items when there is extra space. A value of 0 means the item will not grow. A value of 1 means it will take an equal share of any remaining space.
What is flex-shrink?
flex-shrink defines how much a flex item should shrink relative to others when the container is too small. A value of 1 (the default) allows the item to shrink. A value of 0 prevents shrinking.
What is flex-basis?
flex-basis sets the initial main size of a flex item before any growing or shrinking. Values include lengths (200px, 50%), auto (uses the item's content size), or 0 (ignore content size).