CSS
CSS Flexbox
Complete flexbox reference. All container and item properties with values.
Container Properties
| Command / Property | Description |
|---|---|
| display: flex | Enable flex layout on the container |
| flex-direction: row | Main axis left to right (default) |
| flex-direction: row-reverse | Main axis right to left |
| flex-direction: column | Main axis top to bottom |
| flex-direction: column-reverse | Main axis bottom to top |
| flex-wrap: nowrap | All items on one line (default) |
| flex-wrap: wrap | Items wrap to next line |
| flex-wrap: wrap-reverse | Items wrap in reverse order |
| justify-content: flex-start | Pack items to the start (default) |
| justify-content: flex-end | Pack items to the end |
| justify-content: center | Center items on main axis |
| justify-content: space-between | Equal space between items |
| justify-content: space-around | Equal space around items |
| justify-content: space-evenly | Equal space between and around items |
| align-items: stretch | Stretch items to fill container (default) |
| align-items: flex-start | Align items to cross axis start |
| align-items: flex-end | Align items to cross axis end |
| align-items: center | Center items on cross axis |
| align-items: baseline | Align items by their text baseline |
| align-content: flex-start | Pack lines to the start |
| align-content: flex-end | Pack lines to the end |
| align-content: center | Center lines in container |
| align-content: space-between | Equal space between lines |
| align-content: space-around | Equal space around lines |
| gap: 1rem | Set gap between flex items |
Item Properties
| Command / Property | Description |
|---|---|
| order: 0 | Control item order (default 0, lower = first) |
| flex-grow: 0 | How much item should grow (default 0) |
| flex-shrink: 1 | How much item should shrink (default 1) |
| flex-basis: auto | Default size before distributing space |
| flex: 1 | Shorthand: grow 1, shrink 1, basis 0% |
| flex: auto | Shorthand: grow 1, shrink 1, basis auto |
| flex: none | Shorthand: grow 0, shrink 0, basis auto |
| align-self: auto | Use container align-items value (default) |
| align-self: flex-start | Align this item to cross axis start |
| align-self: flex-end | Align this item to cross axis end |
| align-self: center | Center this item on cross axis |
| align-self: stretch | Stretch this item to fill cross axis |
Common Patterns
| Command / Property | Description |
|---|---|
| display:flex; justify-content:center; align-items:center | Perfect centering (horizontal + vertical) |
| display:flex; flex-direction:column; min-height:100vh | Full-height page layout |
| margin-left: auto | Push item to the right (flex row) |
| flex: 1 on child | Make one child fill remaining space |
| flex-wrap:wrap; gap:1rem | Responsive grid without media queries |