Container Properties (Parent)
.container { display: flex; /* or inline-flex */ }
| Property | Values | Description |
|---|
| flex-direction | row | row-reverse | column | column-reverse | Direction of main axis |
| flex-wrap | nowrap | wrap | wrap-reverse | Whether items wrap to next line |
| flex-flow | [direction] [wrap] | Shorthand for direction + wrap |
| justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly | Align along main axis |
| align-items | stretch | flex-start | flex-end | center | baseline | Align along cross axis |
| align-content | Same as justify-content + stretch | Align rows when there's extra space (multi-line only) |
| gap | px / rem / % | Space between items (row-gap column-gap) |
Item Properties (Children)
| Property | Default | Description |
|---|
| flex-grow | 0 | How much item grows to fill available space (ratio) |
| flex-shrink | 1 | How much item shrinks when container is too small |
| flex-basis | auto | Default size before grow/shrink are applied |
| align-self | auto | Override container's align-items for this item |
| order | 0 | Visual order — lower numbers appear first |
flex Shorthand
/* flex: grow shrink basis */
flex: 1; /* flex: 1 1 0% — grow and shrink equally */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto — rigid, won't grow or shrink */
flex: 0 0 200px; /* exactly 200px, won't flex */
flex: 2; /* grows twice as fast as flex:1 siblings */
Common Patterns
/* Horizontal nav with spacer */
.nav { display: flex; align-items: center; }
.nav .spacer { flex: 1; } /* pushes right items to end */
/* Equal height columns */
.columns { display: flex; gap: 20px; }
.column { flex: 1; } /* all columns same width */
/* Center everything */
.hero { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
/* Card grid that wraps */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 280px; } /* min 280px, grows to fill */
/* Sidebar layout */
.layout { display: flex; gap: 32px; }
.sidebar { flex: 0 0 260px; } /* fixed 260px */
.main { flex: 1; } /* fills the rest */