CSS Flexbox Cheat Sheet

Basic Structure

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

Container Properties

flex-direction (Main Axis Direction)

.container {
  flex-direction: row;            /* Left to right (default) */
  flex-direction: row-reverse;    /* Right to left */
  flex-direction: column;         /* Top to bottom */
  flex-direction: column-reverse; /* Bottom to top */
}

flex-wrap (Wrapping)

.container {
  flex-wrap: nowrap;       /* No wrapping (default) */
  flex-wrap: wrap;         /* Wrap items */
  flex-wrap: wrap-reverse; /* Wrap in reverse direction */
}

justify-content (Main Axis Alignment)

.container {
  justify-content: flex-start;    /* Start position (default) */
  justify-content: flex-end;      /* End position */
  justify-content: center;        /* Center */
  justify-content: space-between; /* Space between items */
  justify-content: space-around;  /* Equal spacing (half space at edges) */
  justify-content: space-evenly;  /* Equal spacing (even space everywhere) */
}

align-items (Cross Axis Alignment)

.container {
  align-items: stretch;    /* Stretch to fill (default) */
  align-items: flex-start; /* Start position */
  align-items: flex-end;   /* End position */
  align-items: center;     /* Center */
  align-items: baseline;   /* Baseline alignment */
}

align-content (Multi-line Alignment)

.container {
  flex-wrap: wrap;
  align-content: flex-start;    /* Start position */
  align-content: flex-end;      /* End position */
  align-content: center;        /* Center */
  align-content: space-between; /* Space between lines */
  align-content: space-around;  /* Equal spacing */
  align-content: stretch;       /* Stretch to fill (default) */
}

gap (Spacing Between Items)

.container {
  gap: 20px;           /* Row and column gap */
  row-gap: 20px;       /* Row gap */
  column-gap: 10px;    /* Column gap */
  gap: 20px 10px;      /* row column */
}

Item Properties

flex (flex-grow, flex-shrink, flex-basis)

.item {
  flex: 1;              /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 1 1 auto;       /* grow shrink basis */
  flex: 0 0 200px;      /* Fixed width */
}

/* Individual properties */
.item {
  flex-grow: 1;         /* Ratio for filling extra space */
  flex-shrink: 0;       /* Do not shrink */
  flex-basis: 200px;    /* Base size */
}

align-self (Individual Cross Axis Alignment)

.item {
  align-self: auto;       /* Follow parent's align-items */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

order (Display Order)

.item {
  order: 0;  /* Default */
  order: -1; /* Move to front */
  order: 1;  /* Move to back */
}

Common Patterns

Centering

/* Perfect centering */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navigation

/* Split left and right */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Right-aligned */
.nav {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

Card Grid

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* Min 300px, distribute extra space evenly */
}

Sidebar Layout

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* Fixed width */
}

.main {
  flex: 1; /* Use all remaining space */
}

Sticky Footer

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

main {
  flex: 1;
}

footer {
  flex-shrink: 0;
}

Equal Width Columns

.columns {
  display: flex;
}

.column {
  flex: 1;
}

Input Form

.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
}

.input-group button {
  flex-shrink: 0;
}

Icon + Text

.icon-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

Media Object

.media {
  display: flex;
  gap: 16px;
}

.media-image {
  flex-shrink: 0;
}

.media-body {
  flex: 1;
}

Shorthand

/* flex-flow = flex-direction + flex-wrap */
.container {
  flex-flow: row wrap;
}

/* flex = flex-grow + flex-shrink + flex-basis */
.item {
  flex: 1 0 auto;
}

Related Articles

• CSS Grid Cheat Sheet - Grid Layout
• Tailwind Cheat Sheet - Utility CSS
• Responsive Design - Practice