CSS Flexbox Cheat Sheet

Essential Flexbox properties and values with practical examples

Container Properties

display

Defines the element as a flex container

Values:
flexinline-flex
display: flex;

flex-direction

Defines the direction of flex items

Values:
rowrow-reversecolumncolumn-reverse
flex-direction: row;

flex-wrap

Defines whether flex items wrap to new lines

Values:
nowrapwrapwrap-reverse
flex-wrap: wrap;

flex-flow

Shorthand for flex-direction and flex-wrap

Values:
direction wrap
flex-flow: row wrap;

justify-content

Aligns flex items along the main axis

Values:
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly
justify-content: center;

align-items

Aligns flex items along the cross axis

Values:
flex-startflex-endcenterbaselinestretch
align-items: center;

align-content

Aligns flex lines when there is extra space

Values:
flex-startflex-endcenterspace-betweenspace-aroundstretch
align-content: space-between;

Item Properties

order

Controls the order of flex items

Values:
number
order: 1;

flex-grow

Defines how much a flex item can grow

Values:
number
flex-grow: 1;

flex-shrink

Defines how much a flex item can shrink

Values:
number
flex-shrink: 1;

flex-basis

Defines the initial size of a flex item

Values:
autocontentwidthpercentage
flex-basis: 200px;

flex

Shorthand for flex-grow, flex-shrink, and flex-basis

Values:
grow shrink basis
flex: 1 1 auto;

align-self

Overrides align-items for individual items

Values:
autoflex-startflex-endcenterbaselinestretch
align-self: center;

Common Patterns

Centered Layout

Perfect centering with flexbox

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navigation Bar

Horizontal navigation with space-between

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Card Layout

Responsive card grid with flexbox

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
  min-width: 0;
}

Sticky Footer

Footer that sticks to bottom

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  margin-top: auto;
}

Tips & Best Practices

Use flex: 1 for equal-width items

Combine justify-content and align-items for perfect centering

Use flex-wrap: wrap for responsive layouts

Prefer gap over margins for spacing between flex items