Hover over the blue boxes to see interactive effects. Resize your browser to see **responsive flex-wrap and flex-direction in action**.
| Property | Values / Options | Definition | Example | Effect on Page |
|---|---|---|---|---|
| display | flex, inline-flex | Makes container a flex container. Children become flex items. | display: flex; | Container `.container` becomes flexbox; items align in row or column. |
| flex-direction | row, row-reverse, column, column-reverse | Defines main axis and direction of items. | flex-direction: row; | Items arranged horizontally (row). |
| flex-wrap | nowrap, wrap, wrap-reverse | Allows items to wrap to next line if space is insufficient. | flex-wrap: wrap; | Items wrap to new line on smaller screens (responsive). |
| justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly | Aligns items horizontally along main axis. | justify-content: center; | Items centered horizontally on desktop; space-around on medium screens. |
| align-items | stretch, flex-start, flex-end, center, baseline | Aligns items vertically along cross axis. | align-items: stretch; | All items have equal height (stretch). |
| flex | flex-grow flex-shrink flex-basis | Shorthand for controlling growth, shrink, and base size of items. | flex: 1 1 200px; | Each item grows/shrinks depending on available space; min width 200px. |
| gap | px, %, rem | Adds spacing between flex items without using margin. | gap: 20px; | 20px spacing between each item. |
| order | integer (0,1,2…) | Changes visual order of items without changing HTML. | order: 2; | Item displayed second even if HTML order is different. |
| align-self | auto, flex-start, flex-end, center, stretch, baseline | Overrides align-items for a single item. | align-self: center; | Centers a specific item vertically while others stretch. |
| flex-grow | number (0,1…) | Defines how much an item can grow relative to others. | flex-grow: 1; | Item expands if container has extra space. |