CSS Flexbox Cheatsheet

A one-dimensional layout system for arranging items in rows or columns with powerful alignment and distribution capabilities.

Overview

CSS Flexbox (Flexible Box Layout) provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. It works along a single axis (main or cross) and is ideal for component layouts and small-scale page structures.

⤢ zoom

---

Container Properties

Key Concepts

The flex container is the parent element that establishes the flex formatting context. All direct children become flex items automatically.

• Main Axis: The primary axis along which flex items are laid out (horizontal by default)
• Cross Axis: The axis perpendicular to the main axis
• Flex Line: A single row or column of flex items

⤢ zoom

Common Properties

/* Enable flexbox */
.container {
    display: flex;          /* Block-level flex container */
    display: inline-flex;   /* Inline-level flex container */
}

/* Direction of main axis */
.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 */
}

/* Wrapping behaviour */
.container {
    flex-wrap: nowrap;       /* Single line (default) */
    flex-wrap: wrap;         /* Multiple lines, top to bottom */
    flex-wrap: wrap-reverse; /* Multiple lines, bottom to top */
}

/* Shorthand for direction and wrap */
.container {
    flex-flow: row wrap;     /* direction | wrap */
    flex-flow: column nowrap;
}

/* Gap between items */
.container {
    gap: 20px;               /* Row and column gap */
    row-gap: 20px;           /* Gap between rows */
    column-gap: 10px;        /* Gap between columns */
}

Examples

Basic Flex Container

/* Horizontal layout */
.navbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Vertical layout */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Wrapping grid-like layout */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

Responsive Direction Change

.container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

---

Alignment Properties

Key Concepts

Flexbox provides powerful alignment capabilities along both axes:

• justify-content: Aligns items along the main axis
• align-items: Aligns items along the cross axis (single line)
• align-content: Aligns flex lines when there's extra space on the cross axis (multi-line)

⤢ zoom

Common Properties

/* Main axis alignment */
.container {
    justify-content: flex-start;    /* Pack items at start (default) */
    justify-content: flex-end;      /* Pack items at end */
    justify-content: center;        /* Centre items */
    justify-content: space-between; /* Equal space between items */
    justify-content: space-around;  /* Equal space around items */
    justify-content: space-evenly;  /* Equal space between and around */
}

/* Cross axis alignment (single line) */
.container {
    align-items: stretch;     /* Stretch to fill container (default) */
    align-items: flex-start;  /* Align to cross-start */
    align-items: flex-end;    /* Align to cross-end */
    align-items: center;      /* Centre on cross axis */
    align-items: baseline;    /* Align text baselines */
}

/* Cross axis alignment (multi-line) */
.container {
    align-content: flex-start;    /* Pack lines at start */
    align-content: flex-end;      /* Pack lines at end */
    align-content: center;        /* Centre lines */
    align-content: space-between; /* Equal space between lines */
    align-content: space-around;  /* Equal space around lines */
    align-content: stretch;       /* Stretch lines to fill (default) */
}

Examples

Perfect Centring

/* Centre both horizontally and vertically */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Spaced Navigation

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

.nav-logo {
    /* Stays at start */
}

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

Card Grid with Equal Spacing

.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: flex-start;
    gap: 20px;
}

---

Item Properties

Key Concepts

Flex item properties control how individual items grow, shrink, and size themselves within the container.

• flex-grow: How much an item should grow relative to others
• flex-shrink: How much an item should shrink relative to others
• flex-basis: The initial size before growing/shrinking

⤢ zoom

Common Properties

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

/* Shrinking */
.item {
    flex-shrink: 1;  /* Shrink if necessary (default) */
    flex-shrink: 0;  /* Don't shrink */
    flex-shrink: 2;  /* Shrink twice as much as flex-shrink: 1 items */
}

/* Initial size */
.item {
    flex-basis: auto;   /* Use content size (default) */
    flex-basis: 0;      /* Start from zero */
    flex-basis: 200px;  /* Fixed initial size */
    flex-basis: 25%;    /* Percentage of container */
}

/* Shorthand (recommended) */
.item {
    flex: initial;    /* 0 1 auto - Don't grow, can shrink */
    flex: auto;       /* 1 1 auto - Grow and shrink */
    flex: none;       /* 0 0 auto - Inflexible */
    flex: 1;          /* 1 1 0 - Flexible, equal distribution */
    flex: 2;          /* 2 1 0 - Twice the growth */
    flex: 0 0 200px;  /* Fixed 200px, no grow/shrink */
}

Examples

Equal Width Items

.container {
    display: flex;
}

.item {
    flex: 1;  /* All items share space equally */
}

Fixed and Flexible Combination

.layout {
    display: flex;
}

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

.content {
    flex: 1;  /* Takes remaining space */
}

Proportional Sizing

.container {
    display: flex;
}

.small {
    flex: 1;  /* 1 part */
}

.medium {
    flex: 2;  /* 2 parts */
}

.large {
    flex: 3;  /* 3 parts */
}

---

Order and Individual Alignment

Key Concepts

Individual flex items can override container alignment and change their visual order without modifying the HTML structure.

• order: Controls the visual order of items (default: 0)
• align-self: Overrides align-items for individual items

Common Properties

/* Visual ordering */
.item {
    order: 0;   /* Default order */
    order: -1;  /* Move before default items */
    order: 1;   /* Move after default items */
    order: 99;  /* Move to end */
}

/* Individual cross-axis alignment */
.item {
    align-self: auto;       /* Use container's align-items (default) */
    align-self: flex-start; /* Align to cross-start */
    align-self: flex-end;   /* Align to cross-end */
    align-self: center;     /* Centre on cross axis */
    align-self: baseline;   /* Align to baseline */
    align-self: stretch;    /* Stretch to fill */
}

Examples

Reordering Items

.container {
    display: flex;
}

/* Move to end on mobile */
@media (max-width: 768px) {
    .sidebar {
        order: 2;
    }

    .main-content {
        order: 1;
    }
}

Individual Item Alignment

.container {
    display: flex;
    align-items: flex-start;
    height: 200px;
}

.item-centred {
    align-self: center;
}

.item-bottom {
    align-self: flex-end;
}

Footer Pushed to Bottom

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

.footer {
    margin-top: auto;  /* Push to bottom */
}

---

Common Layout Patterns

Key Concepts

Flexbox excels at creating common UI patterns with minimal CSS. These patterns are reusable building blocks for web layouts.

Examples

Navigation Bar

/* Basic navbar with logo and links */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #333;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

Card Layout

/* Responsive card grid */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    flex: 1 1 300px;  /* Grow, shrink, min 300px */
    max-width: 400px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Card with footer at bottom */
.card {
    display: flex;
    flex-direction: column;
}

.card-content {
    flex: 1;
}

.card-footer {
    margin-top: auto;
}

Perfect Centring

/* Centre content in viewport */
.centre-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Centre with maximum width */
.centre-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.content {
    width: 100%;
    max-width: 800px;
}

Holy Grail Layout

/* Classic three-column layout */
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex: 0 0 auto;
}

.main {
    display: flex;
    flex: 1;
}

.sidebar-left {
    flex: 0 0 200px;
    order: -1;
}

.content {
    flex: 1;
}

.sidebar-right {
    flex: 0 0 200px;
}

Input Group

/* Input with button */
.input-group {
    display: flex;
}

.input-group input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
}

.input-group button {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: 1px solid #007bff;
    border-radius: 0 4px 4px 0;
    background: #007bff;
    color: white;
}

Media Object

/* Image with text beside it */
.media {
    display: flex;
    gap: 15px;
}

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

.media-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.media-body {
    flex: 1;
}

---

Responsive Flexbox Patterns

Key Concepts

Flexbox naturally responds to viewport changes. Combined with media queries and flexible sizing, it creates truly responsive layouts.

Examples

Mobile-First Direction Change

/* Stack on mobile, row on desktop */
.responsive-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 768px) {
    .responsive-layout {
        flex-direction: row;
    }
}

Flexible Card Grid

/* Cards that adjust to available space */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 100%;  /* Full width mobile */
}

@media (min-width: 576px) {
    .card {
        flex: 1 1 calc(50% - 10px);  /* Two columns */
    }
}

@media (min-width: 992px) {
    .card {
        flex: 1 1 calc(33.333% - 14px);  /* Three columns */
    }
}

@media (min-width: 1200px) {
    .card {
        flex: 1 1 calc(25% - 15px);  /* Four columns */
    }
}

Responsive Navigation

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

.nav-brand {
    flex: 0 0 auto;
}

.nav-toggle {
    display: block;
    flex: 0 0 auto;
}

.nav-links {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
}

.nav-links.active {
    display: flex;
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        margin-top: 0;
    }
}

Sidebar Layout with Collapse

.page-layout {
    display: flex;
    flex-direction: column;
}

.sidebar {
    flex: 0 0 auto;
    padding: 20px;
    background: #f5f5f5;
}

.main-content {
    flex: 1;
    padding: 20px;
}

@media (min-width: 992px) {
    .page-layout {
        flex-direction: row;
    }

    .sidebar {
        flex: 0 0 280px;
    }
}

Responsive Form Layout

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1 1 100%;
}

@media (min-width: 576px) {
    .form-group {
        flex: 1 1 calc(50% - 8px);
    }

    .form-group.full-width {
        flex: 1 1 100%;
    }
}

---

Quick Reference

Property	Values	Description
display	flex, inline-flex	Enable flex container
flex-direction	row, row-reverse, column, column-reverse	Main axis direction
flex-wrap	nowrap, wrap, wrap-reverse	Single or multiple lines
flex-flow	<direction> <wrap>	Shorthand for direction and wrap
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly	Main axis alignment
align-items	stretch, flex-start, flex-end, center, baseline	Cross axis alignment (items)
align-content	flex-start, flex-end, center, space-between, space-around, stretch	Cross axis alignment (lines)
gap	<length>	Gap between items
flex-grow	<number>	Growth factor (default: 0)
flex-shrink	<number>	Shrink factor (default: 1)
flex-basis	auto, <length>, <percentage>	Initial size
flex	<grow> <shrink> <basis>	Shorthand for flex properties
order	<integer>	Visual order (default: 0)
align-self	auto, flex-start, flex-end, center, baseline, stretch	Individual cross alignment

Common Flex Shorthand Values

Value	Equivalent	Use Case
flex: initial	0 1 auto	Don't grow, can shrink, auto size
flex: auto	1 1 auto	Flexible based on content
flex: none	0 0 auto	Fully inflexible
flex: 1	1 1 0	Equal distribution, ignore content
flex: 0 0 <basis>	-	Fixed size item

---

Common Issues and Solutions

Issue: Items Not Wrapping

Problem: Items overflow the container instead of wrapping.

/* Solution: Enable wrapping */
.container {
    display: flex;
    flex-wrap: wrap;  /* Add this */
}

Issue: Items Not Growing Equally

Problem: Items have different widths despite flex: 1.

/* Solution: Reset flex-basis to 0 */
.item {
    flex: 1 1 0;  /* Not flex: 1 1 auto */
    min-width: 0; /* Allow shrinking below content size */
}

Issue: Content Overflowing Item

Problem: Text or content overflows the flex item.

/* Solution: Allow shrinking and handle overflow */
.item {
    min-width: 0;        /* Override default min-width: auto */
    overflow: hidden;    /* Or overflow: auto */
    text-overflow: ellipsis;
    white-space: nowrap;
}

Issue: Image Not Scaling Properly

Problem: Images stretch or distort in flex items.

/* Solution: Control image sizing */
.item img {
    max-width: 100%;
    height: auto;
    object-fit: cover;  /* Or contain */
}

Issue: Vertical Centring Not Working

Problem: align-items: center doesn't centre items vertically.

/* Solution: Container needs explicit height */
.container {
    display: flex;
    align-items: center;
    height: 100vh;  /* Or min-height */
}

Issue: Footer Not at Bottom

Problem: Footer doesn't stay at the bottom of the page.

/* Solution: Use flex column with margin-top: auto */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

Issue: Gap Not Working in Older Browsers

Problem: gap property not supported in Safari < 14.1.

/* Solution: Use margin as fallback */
.container {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;  /* Negative margin */
}

.item {
    margin: 10px;   /* Item margin creates gap */
}

/* Modern browsers with gap support */
@supports (gap: 20px) {
    .container {
        gap: 20px;
        margin: 0;
    }

    .item {
        margin: 0;
    }
}

Issue: Flex Items Shrinking Below Content

Problem: Items shrink smaller than their content.

/* Solution: Prevent shrinking */
.item {
    flex-shrink: 0;
    /* Or set min-width */
    min-width: 200px;
}

Issue: Column Direction Height Problems

Problem: Items don't stretch in column direction.

/* Solution: Container needs height, items need width handling */
.container {
    display: flex;
    flex-direction: column;
    height: 400px;  /* Or min-height */
}

.item {
    /* align-items controls width in column direction */
}

---

Related Topics

The following topics complement CSS Flexbox knowledge:

1. CSS Grid - Two-dimensional layout system for complex page layouts and grid-based designs
2. CSS Box Model - Understanding margin, padding, border, and content for proper element sizing
3. Responsive Web Design - Media queries, viewport units, and mobile-first approaches
4. CSS Custom Properties (Variables) - Create maintainable and themeable flexbox layouts
5. CSS Transitions and Animations - Animate flex property changes for smooth UI interactions
6. Accessibility in CSS Layouts - Ensure flex-based layouts maintain proper reading order and accessibility