CSS Flexbox Cheatsheet
A quick-reference guide for the CSS Flexible Box Layout (Flexbox), covering flex container (parent) configurations, flex item (child) properties, and common responsive layout patterns.
## Container Properties (Parent)
The flex container is initialized by defining `display: flex` or `display: inline-flex`. This creates the flex context for all its direct children.
```css
.container {
display: flex; /* Initialize a block-level flex container */
/* display: inline-flex; */ /* Initialize an inline-level flex container */
}
```
### 1. Flex Direction
Controls the direction of the main axis along which flex items are laid out.
```css
.container {
flex-direction: row; /* Lay out left to right (default main axis is horizontal) */
/* flex-direction: row-reverse; */ /* Lay out right to left */
/* flex-direction: column; */ /* Lay out top to bottom (main axis is now vertical) */
/* flex-direction: column-reverse; */ /* Lay out bottom to top */
}
```
### 2. Flex Wrap
Controls whether the flex container wraps items across multiple lines if space is constrained.
```css
.container {
flex-wrap: nowrap; /* All items fit on a single line (shrink to fit, default) */
/* flex-wrap: wrap; */ /* Wrap items onto multiple lines from top to bottom */
/* flex-wrap: wrap-reverse; */ /* Wrap items onto multiple lines from bottom to top */
}
```
### 3. Flex Flow (Shorthand)
A shorthand for setting both `flex-direction` and `flex-wrap` in a single line.
```css
.container {
flex-flow: row wrap; /* Shorthand: [direction] [wrap] */
}
```
### 4. Justify Content
Aligns flex items along the **main axis** (the direction set by `flex-direction`).
```css
.container {
justify-content: flex-start; /* Align items to the start of the main axis (default) */
/* justify-content: flex-end; */ /* Align items to the end of the main axis */
/* justify-content: center; */ /* Align items in the center of the main axis */
/* justify-content: space-between; */ /* Equal spacing between items; first/last touch borders */
/* justify-content: space-around; */ /* Equal spacing around items; half-size space on ends */
/* justify-content: space-evenly; */ /* Equal spacing around items and on both ends */
}
```
### 5. Align Items
Aligns flex items along the **cross axis** (perpendicular to the main axis).
```css
.container {
align-items: stretch; /* Stretch items to fill the container height/width (default) */
/* align-items: flex-start; */ /* Align items to the start of the cross axis */
/* align-items: flex-end; */ /* Align items to the end of the cross axis */
/* align-items: center; */ /* Align items in the center of the cross axis */
/* align-items: baseline; */ /* Align items along their text baselines */
}
```
### 6. Align Content
Aligns a multi-line flex container's lines along the cross axis when there is extra space (has no effect on single-line flex containers!).
```css
.container {
align-content: stretch; /* Stretch lines to fill remaining space (default) */
/* align-content: flex-start; */ /* Pack lines to the start of the cross axis */
/* align-content: flex-end; */ /* Pack lines to the end of the cross axis */
/* align-content: center; */ /* Pack lines in the center of the cross axis */
/* align-content: space-between; */ /* Equal spacing between lines */
/* align-content: space-around; */ /* Equal spacing around lines; half-space on ends */
}
```
### 7. Gaps (Spacing)
Specifies the explicit minimum spacing between flex items (does not add spacing on container borders).
```css
.container {
gap: 1rem; /* Spacing of 1rem between both rows and columns */
/* row-gap: 1rem; */ /* Spacing of 1rem between rows only */
/* column-gap: 1.5rem; */ /* Spacing of 1.5rem between columns only */
}
```
---
## Item Properties (Children)
These properties apply directly to the child elements inside a flex container.
```css
.item {
/* Child properties go here */
}
```
### 1. Order
Overrides the default source order of HTML markup to position items.
```css
.item {
order: 1; /* Default is 0. Lower numbers appear first, higher numbers last (supports negative values) */
}
```
### 2. Flex Grow
Defines the ability of a flex item to grow and claim remaining free space inside the container.
```css
.item {
flex-grow: 1; /* Default is 0 (does not grow). If set to 1, item grows to claim available space. If all items are 1, they split space equally */
}
```
### 3. Flex Shrink
Defines the ability of a flex item to shrink when container space is constrained.
```css
.item {
flex-shrink: 1; /* Default is 1 (shrinks to fit). If set to 0, item is locked and will NOT shrink below its size basis */
}
```
### 4. Flex Basis
Defines the default size of an item before remaining space is distributed.
```css
.item {
flex-basis: 250px; /* Sets default starting size. Can be px, em, rem, %, or auto (default) */
}
```
### 5. Flex (Shorthand)
The recommended shorthand for setting `flex-grow`, `flex-shrink`, and `flex-basis` in a single line.
```css
.item {
flex: 0 1 auto; /* Shorthand: [grow] [shrink] [basis] (default) */
/* flex: 1; */ /* Shorthand for: 1 1 0% (grows and shrinks, splits space equally) */
/* flex: none; */ /* Shorthand for: 0 0 auto (does not grow or shrink, locked size) */
}
```
### 6. Align Self
Allows an individual flex item to override the container's `align-items` alignment setting.
```css
.item {
align-self: center; /* Overrides parent's align-items. Can be: auto, stretch, flex-start, flex-end, center, baseline */
}
```
---
## Common Layout Patterns
### 1. Absolute Centering (Perfect Center)
The classic, simplest way to perfectly center any content horizontally and vertically.
```css
.parent-center {
display: flex;
justify-content: center;
align-items: center;
}
```
### 2. Responsive Card Grid
An extremely robust responsive layout that flows items and wraps them naturally across screen size shifts.
```css
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card-item {
flex: 1 1 300px; /* Grow and shrink, with a minimum starting size of 300px before wrapping */
}
```
### 3. Sticky Footer Layout
Ensure the footer sticks to the bottom of the screen when page content is short, but pushes down naturally when content is long.
```css
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-body {
flex: 1 0 auto; /* Grow to fill all remaining vertical space, pushing footer down */
}
.footer {
flex-shrink: 0; /* Lock footer so it never shrinks */
}
```
---