CSSINTERMEDIATE

CSS Flexbox

CSS Flexbox cheat sheet with visual examples for align-items, justify-content, flex-wrap, ordering, and responsive layout patterns.

6 min read

cssflexboxlayoutresponsive

Other CSS Sheets

CSSBEGINNER CSS AnimationsINTERMEDIATE CSS GridINTERMEDIATE Screen Sizes & Responsive BreakpointsINTERMEDIATE

Flex Container

Create Flex Container

Transform any element into a flexible box layout container that arranges its children

css

.container {
  display: flex; /* or inline-flex */
}

📄 HTMLhtml

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

🎨 Display Flex

💡 Creates flex container

📦 Direct children become flex items

⚡ Enables flex properties

Flex Direction

Set the main axis direction to control how flex items flow within the container

css

.container {
  flex-direction: row;         /* → left to right */
  flex-direction: row-reverse; /* ← right to left */
  flex-direction: column;      /* ↓ top to bottom */
  flex-direction: column-reverse; /* ↑ bottom to top */
}

📄 HTMLhtml

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

🎨 Row

🎨 Column

➡️ Sets main axis direction

🔄 Changes item flow

📱 Use media queries for responsive

Flex Wrap

Control whether flex items wrap to new lines when they overflow the container

css

.container {
  flex-wrap: nowrap;       /* single line */
  flex-wrap: wrap;         /* multiple lines */
  flex-wrap: wrap-reverse; /* wrap upward */
}

📄 HTMLhtml

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

🎨 No Wrap

🎨 Wrap

📏 Controls line wrapping

💡 wrap allows multiple lines

⚡ wrap-reverse flips line order

Gap

Add consistent spacing between flex items without using margins

css

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

📄 HTMLhtml

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

🎨 Gap Demo

✨ Spacing between items

💡 Replaces margin hacks

📏 Works with wrap

Alignment

Justify Content (Main Axis)

Align and distribute flex items along the main axis (horizontal by default)

css

.container {
  justify-content: flex-start;    /* align to start */
  justify-content: flex-end;      /* align to end */
  justify-content: center;        /* center items */
  justify-content: space-between; /* space between */
  justify-content: space-around;  /* space around */
  justify-content: space-evenly;  /* equal space */
}

📄 HTMLhtml

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

🎨 Center

🎨 Space Between

↔️ Controls main axis alignment

💡 Distributes extra space

⚡ space-between for nav bars

Align Items (Cross Axis)

Align flex items along the cross axis (vertical by default) within their line

css

.container {
  align-items: stretch;    /* stretch to fill */
  align-items: flex-start; /* align to start */
  align-items: flex-end;   /* align to end */
  align-items: center;     /* center items */
  align-items: baseline;   /* text baseline */
}

📄 HTMLhtml

<div class="container">
  <div class="item small">Small</div>
  <div class="item medium">Medium</div>
  <div class="item large">Large</div>
</div>

🎨 Stretch

🎨 Center

↕️ Controls cross axis alignment

💡 stretch is default

🎯 center for perfect centering

Align Content

Align and distribute wrapped lines of flex items within the container

css

.container {
  align-content: stretch;       /* stretch lines */
  align-content: flex-start;    /* pack at start */
  align-content: flex-end;      /* pack at end */
  align-content: center;        /* center lines */
  align-content: space-between; /* space between */
}

📄 HTMLhtml

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

📦 Aligns wrapped lines

⚠️ Only works with flex-wrap: wrap

💡 Similar to justify-content

Flex Items

Flex Grow

Define how much a flex item should grow relative to other items to fill available space

css

.item {
  flex-grow: 0;    /* don't grow (default) */
  flex-grow: 1;    /* grow to fill space */
  flex-grow: 2;    /* grow twice as much */
}

📄 HTMLhtml

<div class="container">
  <div class="item grow-0">No grow</div>
  <div class="item grow-1">Grow 1</div>
  <div class="item grow-2">Grow 2</div>
</div>

🎨 Flex Grow

📈 Controls growth ratio

💡 0 means no growth

⚡ Distributes extra space

Flex Shrink

Define how much a flex item should shrink relative to other items when space is limited

css

.item {
  flex-shrink: 1;  /* can shrink (default) */
  flex-shrink: 0;  /* don't shrink */
  flex-shrink: 2;  /* shrink twice as much */
}

📄 HTMLhtml

<div class="container">
  <div class="item shrink-0">No shrink</div>
  <div class="item shrink-1">Shrink 1</div>
  <div class="item shrink-2">Shrink 2</div>
</div>

🎨 Flex Shrink

📉 Controls shrink ratio

⚠️ 0 prevents shrinking

💡 Handles overflow

Flex Basis

Set the initial main size of a flex item before free space is distributed

css

.item {
  flex-basis: auto;    /* use width/height */
  flex-basis: 200px;   /* specific size */
  flex-basis: 50%;     /* percentage */
  flex-basis: 0;       /* ignore content */
}

📄 HTMLhtml

<div class="container">
  <div class="item basis-auto">Auto</div>
  <div class="item basis-fixed">200px</div>
  <div class="item basis-percent">50%</div>
</div>

🎨 Flex Basis

auto

200px

30%

📏 Sets initial main size

⚡ Before grow/shrink

💡 Overrides width/height

Flex Shorthand

Combine grow, shrink, and basis values in a single flexible property

css

.item {
  flex: 1;              /* grow: 1, shrink: 1, basis: 0 */
  flex: 0 1 auto;       /* default values */
  flex: 1 1 0;          /* common equal columns */
  flex: 2 1 100px;      /* grow: 2, shrink: 1, basis: 100px */
}

📄 HTMLhtml

<div class="container">
  <div class="item flex-1">flex: 1</div>
  <div class="item flex-2">flex: 2</div>
  <div class="item flex-none">flex: none</div>
</div>

🎨 Flex Shorthand

flex: 1

flex: 2

none

🎯 Combines grow, shrink, basis

💡 flex: 1 for equal columns

⚡ Most common flex property

Align Self

Override the container's align-items value for individual flex items

css

.item {
  align-self: auto;       /* use align-items */
  align-self: flex-start; /* align to start */
  align-self: flex-end;   /* align to end */
  align-self: center;     /* center this item */
  align-self: stretch;    /* stretch to fill */
}

📄 HTMLhtml

<div class="container">
  <div class="item">Default</div>
  <div class="item self-center">Centered</div>
  <div class="item self-end">End</div>
</div>

🎨 Align Self

Default

Start

Center

End

🎯 Overrides align-items

💡 For individual items

⚡ Useful for exceptions

Order

Change the visual order of flex items without modifying the HTML structure

css

.item {
  order: 0;    /* default order */
  order: -1;   /* move to start */
  order: 1;    /* move to end */
  order: 999;  /* move to very end */
}

📄 HTMLhtml

<div class="container">
  <div class="item order-3">First in HTML</div>
  <div class="item order-1">Second in HTML</div>
  <div class="item order-2">Third in HTML</div>
</div>

🎨 Order

HTML 1st

HTML 2nd

HTML 3rd

🔄 Changes visual order

💡 Doesn't affect HTML

⚠️ Affects tab order

Common Patterns

Center Content

Perfect centering technique using flexbox for both horizontal and vertical alignment

css

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

📄 HTMLhtml

<div class="center">
  <div class="content">
    Centered Content
  </div>
</div>

🎯 Perfect centering pattern

💡 Works for any content

⚡ No more transform hacks

Navigation Bar

Common flexbox pattern for creating responsive navigation bars with logo and links

css

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

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

📄 HTMLhtml

<nav class="navbar">
  <div class="nav-brand">Logo</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

🧭 Common navbar pattern

💡 space-between for logo/links

📱 Easy mobile adaptation

Card Grid

Responsive card layout that automatically adjusts columns based on available space

css

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

.card {
  flex: 1 1 300px;
}

📄 HTMLhtml

<div class="cards">
  <div class="card">
    <div class="card-content">Content</div>
    <div class="card-footer">Footer</div>
  </div>
  <div class="card">
    <div class="card-content">Content</div>
    <div class="card-footer">Footer</div>
  </div>
</div>

🃏 Responsive card layout

💡 Auto-adjusting columns

⚡ No media queries needed

Sidebar Layout

Classic two-column layout with fixed sidebar and flexible main content area

css

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

📄 HTMLhtml

<div class="layout">
  <aside class="sidebar">
    <h3>Sidebar</h3>
    <nav>Navigation</nav>
  </aside>
  <main class="main">
    <h1>Main Content</h1>
    <p>Content goes here...</p>
  </main>
</div>

📐 Classic sidebar pattern

💡 Fixed sidebar width

📱 Stack on mobile

More CSS Cheat Sheets

CSS Flexbox

Table of Contents

Other CSS Sheets

Flex Container

Create Flex Container

Flex Direction

Flex Wrap

Gap

Alignment

Justify Content (Main Axis)

Align Items (Cross Axis)

Align Content

Flex Items

Flex Grow

Flex Shrink

Flex Basis

Flex Shorthand

Align Self

Order

Common Patterns

Center Content

Navigation Bar

Card Grid

Sidebar Layout

More CSS Cheat Sheets

Screen Sizes & Responsive Breakpoints

CSS Grid

CSS Animations