⌘K
We use cookies to improve your experience
We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience.
7 sections · 43 items
| Code / Syntax | Description |
|---|---|
display: flex | Create a flex container (block-level) |
display: inline-flex | Create an inline flex container |
flex-direction: row | Items placed left to right (default) |
flex-direction: row-reverse | Items placed right to left |
flex-direction: column | Items placed top to bottom |
flex-direction: column-reverse | Items placed 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 to previous line |
| Code / Syntax | Description |
|---|---|
justify-content: flex-start | Pack items at start (default) |
justify-content: flex-end | Pack items at 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 at edges |
| Code / Syntax | Description |
|---|---|
align-items: stretch | Stretch to fill container (default) |
align-items: flex-start | Align at cross-axis start |
align-items: flex-end | Align at cross-axis end |
align-items: center | Center on cross axis |
align-items: baseline | Align along text baseline |
| Code / Syntax | Description |
|---|---|
align-content: flex-start | Lines packed at start |
align-content: flex-end | Lines packed at end |
align-content: center | Lines packed in center |
align-content: space-between | Equal space between lines |
align-content: space-around | Equal space around lines |
align-content: stretch | Lines stretch to fill (default) |
| Code / Syntax | Description |
|---|---|
flex: 1 | Shorthand: grow 1, shrink 1, basis 0% |
flex: 0 1 auto | Default flex value |
flex-grow: 1 | Item grows to fill available space |
flex-shrink: 0 | Item will not shrink |
flex-basis: 200px | Initial size before growing/shrinking |
flex-basis: auto | Use item intrinsic size |
align-self: center | Override align-items for this item |
order: -1 | Move item before others (default: 0) |
| Code / Syntax | Description |
|---|---|
gap: 16px | Equal row and column gap |
row-gap: 16px | Gap between rows |
column-gap: 16px | Gap between columns |
gap: 16px 24px | Row gap 16px, column gap 24px |
| Code / Syntax | Description |
|---|---|
display:flex; justify-content:center; align-items:center | Center an item both ways |
display:flex; justify-content:space-between | Push items to edges |
margin-left: auto | Push item to the right |
flex-direction:column; min-height:100vh | Sticky footer layout |
flex: 1 1 300px; flex-wrap: wrap | Responsive equal columns |