Container properties: flex-direction (main axis direction), flex-wrap (wrapping), justify-content (main axis alignment), align-items (cross axis alignment), align-content (multi-line alignment), gap (item spacing)
Item properties: flex-grow (growth factor), flex-shrink (shrink factor), flex-basis (initial size), align-self (individual alignment), order (ordering)
Common pattern: display:flex; align-items:center; justify-content:center; β perfect horizontal and vertical centering, the most widely used flexbox pattern in web development.
Simple rule: Use Flexbox for one-dimensional layouts (a row or column). Use Grid for two-dimensional layouts (rows and columns together). Flexbox is ideal for navigation bars, tag lists, centering, and card rows. Grid excels at page layouts, image galleries, and dashboards.
flex:1 is shorthand for flex-grow:1 flex-shrink:1 flex-basis:0%. Items with flex:1 will equally divide the remaining space β it's the most common way to create equal-width layouts in Flexbox.
align-items controls alignment within a single row. align-content controls how multiple rows are distributed along the cross axis β it only works when flex-wrap:wrap creates multiple lines. Think of align-items as per-row alignment and align-content as overall distribution.
Yes. Once loaded, this tool works entirely in your browser with no further network requests. All processing is done client-side.
No. All processing is done locally in your browser. No data is sent to any server. The tool works offline after the initial page load.