Complete reference for all CSS Flexbox properties: container properties (flex-direction, justify-content, align-items, etc.) and item properties (flex-grow, order, align-self, etc.) — with all values and use cases.
Sets the direction of the main axis along which flex items are placed.
| Value | Description |
|---|---|
| row | Items flow left-to-right (default). |
| row-reverse | Items flow right-to-left. |
| column | Items flow top-to-bottom. |
| column-reverse | Items flow bottom-to-top. |
Controls whether flex items are forced onto one line or can wrap onto multiple lines.
| Value | Description |
|---|---|
| nowrap | All items on one line (default). May overflow. |
| wrap | Items wrap to next line when needed. |
| wrap-reverse | Items wrap to the previous line. |
Aligns flex items along the main axis (horizontal when flex-direction is row).
| Value | Description |
|---|---|
| flex-start | Items pack to the start of the main axis (default). |
| flex-end | Items pack to the end of the main axis. |
| center | Items are centered along the main axis. |
| space-between | Items evenly distributed; first and last items at edges. |
| space-around | Items evenly distributed with equal space around each. |
| space-evenly | Items have equal space between them and the edges. |
Aligns flex items along the cross axis (perpendicular to the main axis).
| Value | Description |
|---|---|
| stretch | Items stretch to fill container height (default). |
| flex-start | Items align to the start of the cross axis. |
| flex-end | Items align to the end of the cross axis. |
| center | Items are centered along the cross axis. |
| baseline | Items align by their text baselines. |
Aligns flex lines in a multi-line container (only applies when flex-wrap is set).
| Value | Description |
|---|---|
| flex-start | Lines pack to the start of the container. |
| flex-end | Lines pack to the end of the container. |
| center | Lines centered in the container. |
| space-between | Lines evenly distributed. |
| space-around | Equal space around each line. |
| stretch | Lines stretch to fill remaining space (default). |
Sets the gap between flex items. Shorthand for row-gap and column-gap.
| Value | Description |
|---|---|
| <length> | Uniform gap between all items. E.g. gap: 16px; |
| <row-gap> <col-gap> | Different row and column gaps. E.g. gap: 8px 16px; |
Defines how much a flex item grows relative to the rest when there is extra space on the main axis.
| Value | Description |
|---|---|
| 0 | Item does not grow (default). |
| 1 | Item grows to fill available space. |
| <number> | Item grows proportionally. E.g. flex-grow: 2 gets twice as much extra space. |
Defines how much a flex item shrinks relative to the rest when there is not enough space.
| Value | Description |
|---|---|
| 1 | Item shrinks proportionally (default). |
| 0 | Item does not shrink. |
| <number> | Item shrinks more/less than others. |
Sets the initial main size of a flex item before flex-grow and flex-shrink distribute space.
| Value | Description |
|---|---|
| auto | Uses item's width/height property (default). |
| 0 | Ignores item size; distributes space purely by flex-grow ratio. |
| <length | %> | Explicit starting size. E.g. flex-basis: 200px; |
Shorthand for flex-grow, flex-shrink, and flex-basis.
| Value | Description |
|---|---|
| 1 | Equivalent to flex: 1 1 0%. Grows and shrinks equally. |
| auto | Equivalent to flex: 1 1 auto. Grows/shrinks based on content. |
| none | Equivalent to flex: 0 0 auto. Fully rigid. |
| <grow> <shrink> <basis> | E.g. flex: 2 1 200px. |
Overrides the align-items value for a single flex item.
| Value | Description |
|---|---|
| auto | Uses the parent's align-items value (default). |
| flex-start | Aligns item to the start of the cross axis. |
| flex-end | Aligns item to the end of the cross axis. |
| center | Centers item on the cross axis. |
| baseline | Aligns item by its baseline. |
| stretch | Stretches item to fill container. |
Controls the order in which flex items appear in the flex container.
| Value | Description |
|---|---|
| 0 | Default order (source order). |
| -1 | Move item before items with order 0. |
| <integer> | Higher numbers appear later. Items with same order use source order. |
Describe the layout you need and get suggested flexbox properties.
marduc812
2026