Container Properties
| Property | Values | Default |
|---|
display | flex, inline-flex | — |
flex-direction | row, column, row-reverse, column-reverse | row |
flex-wrap | nowrap, wrap, wrap-reverse | nowrap |
justify-content | flex-start, center, flex-end, space-between, space-around, space-evenly | flex-start |
align-items | stretch, flex-start, center, flex-end, baseline | stretch |
align-content | Same as justify-content | stretch |
gap | Length (e.g. 16px, 1rem) | 0 |
Item Properties
| Property | Description | Default |
|---|
flex-grow | How much item grows to fill space | 0 |
flex-shrink | How much item shrinks | 1 |
flex-basis | Initial size before grow/shrink | auto |
flex | Shorthand: grow shrink basis | 0 1 auto |
align-self | Override align-items for this item | auto |
order | Visual order (lower = first) | 0 |
Common Patterns
/* Center everything */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* Navbar: logo left, links right */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Equal columns */
.columns {
display: flex;
gap: 1rem;
}
.columns > * {
flex: 1;
}
/* Sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }
