Skip to main content
Mapagam

CSS Flexbox Layout

1. Flex Container Properties (display: flex)

Property Values Description Default
display flex | inline-flex Defines flex container (block or inline level) -
flex-direction row | row-reverse | column | column-reverse Main axis direction (horizontal or vertical) row
flex-wrap nowrap | wrap | wrap-reverse Whether items wrap to new lines nowrap
flex-flow direction wrap Shorthand for flex-direction and flex-wrap row nowrap
justify-content start | center | space-between | space-around | space-evenly Alignment along main axis flex-start
align-items stretch | start | center | end | baseline Alignment along cross axis (single line) stretch
align-content start | center | space-between | space-around | stretch Alignment of multiple lines (when wrapped) stretch
gap length | row-gap column-gap Spacing between flex items 0
row-gap length Vertical spacing between rows 0
column-gap length Horizontal spacing between items 0

Example: Basic flex container setup

/* Create flex container */
.container {
    display: flex;
    flex-direction: row;    /* Horizontal layout (default) */
    flex-wrap: wrap;        /* Allow wrapping */
    gap: 1rem;              /* Modern spacing */
}

/* Alternative: inline-flex */
.inline-container {
    display: inline-flex;   /* Inline-level flex container */
}

/* Shorthand */
.shorthand {
    display: flex;
    flex-flow: row wrap;    /* direction + wrap */
}

2. Flex Item Properties (flex-grow, flex-shrink, flex-basis)

Property Values Description Default
order integer Controls visual order (without changing DOM) 0
flex-grow number ≥ 0 Growth factor (share of remaining space) 0
flex-shrink number ≥ 0 Shrink factor (when insufficient space) 1
flex-basis auto | length | % Initial main size before grow/shrink auto
flex grow shrink basis Shorthand for grow, shrink, basis 0 1 auto
align-self auto | start | center | end | stretch | baseline Override align-items for individual item auto
flex Shorthand Expands To Description Use Case
flex: 1 1 1 0% Equal-width items, grow and shrink Equal columns/cards
flex: auto 1 1 auto Flexible based on content size Content-driven sizing
flex: none 0 0 auto Fixed size, no grow or shrink Icons, fixed-width elements
flex: 0 1 auto 0 1 auto Default - shrinks but doesn't grow Default behavior
flex: 2 2 1 0% Grows 2x relative to flex: 1 items Proportional sizing

Example: Flex item properties

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

/* Proportional sizing */
.sidebar {
    flex: 1;  /* Takes 1 part */
}
.main {
    flex: 3;  /* Takes 3 parts (3x wider) */
}

/* Fixed size item */
.fixed {
    flex: none;  /* Doesn't grow or shrink */
    width: 200px;
}

/* Content-based sizing */
.auto-size {
    flex: auto;  /* Flexible based on content */
}

/* Reorder items visually */
.header { order: -1; }  /* First */
.main { order: 1; }     /* Second */
.footer { order: 2; }   /* Third */

/* Individual alignment */
.special {
    align-self: center;  /* Override container's align-items */
}

3. Flex Direction and Wrap (flex-direction, flex-wrap)

flex-direction Values

Value Main Axis Behavior
row Horizontal → Left to right (default)
row-reverse Horizontal ← Right to left
column Vertical ↓ Top to bottom
column-reverse Vertical ↑ Bottom to top

flex-wrap Values

Value Behavior
nowrap Single line (default)
wrap Multi-line, wrap down
wrap-reverse Multi-line, wrap up

Example: Direction and wrapping

/* Horizontal layout (default) */
.horizontal {
    display: flex;
    flex-direction: row;  /* Left to right */
}

/* Vertical layout */
.vertical {
    display: flex;
    flex-direction: column;  /* Top to bottom */
}

/* Reversed horizontal */
.reversed {
    display: flex;
    flex-direction: row-reverse;  /* Right to left */
}

/* Wrapping items */
.wrap-container {
    display: flex;
    flex-wrap: wrap;  /* Allow items to wrap to next line */
    gap: 1rem;
}

/* No wrapping (default) */
.no-wrap {
    display: flex;
    flex-wrap: nowrap;  /* Force single line, items shrink */
}

/* Combined shorthand */
.combined {
    display: flex;
    flex-flow: column wrap;  /* Vertical + wrapping */
}

4. Flexbox Alignment (justify-content, align-items)

Property Axis Values Description
justify-content Main axis flex-start | center | flex-end | space-between | space-around | space-evenly Distributes items along main axis
align-items Cross axis stretch | flex-start | center | flex-end | baseline Aligns items on cross axis (single line)
align-content Cross axis flex-start | center | flex-end | space-between | space-around | stretch Aligns flex lines (multi-line only)
align-self Cross axis auto | flex-start | center | flex-end | stretch | baseline Override align-items for one item

justify-content (Main Axis)

  • flex-start - Start of line
  • center - Centered
  • flex-end - End of line
  • space-between - Equal spacing, no edges
  • space-around - Equal space around items
  • space-evenly - Equal space everywhere

align-items (Cross Axis)

  • stretch - Fill container (default)
  • flex-start - Start of cross axis
  • center - Centered
  • flex-end - End of cross axis
  • baseline - Text baseline aligned

align-content (Multi-line)

  • stretch - Lines fill space
  • flex-start - Lines at start
  • center - Lines centered
  • space-between - Space between lines
  • space-around - Space around lines

Example: Alignment patterns

/* Center horizontally and vertically (Holy Grail) */
.center-both {
    display: flex;
    justify-content: center;  /* Horizontal center */
    align-items: center;      /* Vertical center */
}

/* Space items evenly */
.space-evenly {
    display: flex;
    justify-content: space-between;  /* Max space between */
}

/* Align to end */
.align-end {
    display: flex;
    justify-content: flex-end;  /* Right align (row) */
    align-items: flex-end;      /* Bottom align */
}

/* Multi-line alignment */
.multi-line {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;  /* Space between lines */
}

/* Individual item alignment */
.container {
    display: flex;
    align-items: flex-start;  /* Default for all items */
}
.special-item {
    align-self: flex-end;  /* Override for this item */
}

5. Flex Basis, Grow, and Shrink Calculations

Property Formula Description Default
flex-basis Initial size Starting size before grow/shrink applied auto
flex-grow (free space × grow) / sum of all grows How much item grows relative to siblings 0
flex-shrink (overflow × shrink × basis) / sum How much item shrinks relative to siblings 1

Example: flex-basis vs width

/* flex-basis sets initial size on main axis */
.item {
    flex-basis: 200px;  /* 200px on main axis (width if row, height if column) */
}

/* auto - uses content or width/height */
.auto-basis {
    flex-basis: auto;   /* Uses width/height if set, else content size */
    width: 150px;       /* This is used as basis */
}

/* 0 vs auto difference */
.zero-basis {
    flex: 1 1 0%;  /* Ignores content size, pure ratio */
}
.auto-basis {
    flex: 1 1 auto;  /* Respects content size, then distributes */
}

Example: flex-grow calculation

/* Container: 1000px, 3 items with 100px basis each */
.container {
    display: flex;
    width: 1000px;
}

/* Free space = 1000 - (100 + 100 + 100) = 700px */

.item1 {
    flex: 1 0 100px;  /* Gets 1/4 of 700px = 175px → Total: 275px */
}
.item2 {
    flex: 2 0 100px;  /* Gets 2/4 of 700px = 350px → Total: 450px */
}
.item3 {
    flex: 1 0 100px;  /* Gets 1/4 of 700px = 175px → Total: 275px */
}
/* Sum of grows = 1 + 2 + 1 = 4 */

/* Equal width items */
.equal {
    flex: 1;  /* All get same width (flex: 1 1 0%) */
}

Example: flex-shrink calculation

/* Container: 500px, 3 items want 300px each */
.container {
    display: flex;
    width: 500px;
}

/* Overflow = (300 + 300 + 300) - 500 = 400px */

.item1 {
    flex: 0 1 300px;  /* Shrink factor: 1, loses proportional space */
}
.item2 {
    flex: 0 2 300px;  /* Shrink factor: 2, loses 2x more */
}
.item3 {
    flex: 0 1 300px;  /* Shrink factor: 1 */
}
/* Sum = 1 + 2 + 1 = 4 */
/* item1 loses: 400 × (1/4) = 100px → 200px */
/* item2 loses: 400 × (2/4) = 200px → 100px */
/* item3 loses: 400 × (1/4) = 100px → 200px */

/* Prevent shrinking */
.no-shrink {
    flex-shrink: 0;  /* Maintains size */
}
Note: flex-basis takes precedence over width/height. Use flex: 1 for equal-width items. flex-shrink: 0 prevents items from shrinking below flex-basis.

6. Common Flexbox Patterns and Use Cases

Pattern Key Properties Description Use Case
Navigation Bar display: flex; align-items: center; gap: 1rem; Horizontal items with auto-push last item Header navigation, toolbars
Card Grid flex: 1 1 300px; flex-wrap: wrap; Equal height cards with responsive wrapping Product grids, blog posts
Holy Grail Layout flex-direction: column; flex: 1; Header, 3-column content, footer Full page layouts
Media Object display: flex; gap: 1rem; Image + text side-by-side Comments, notifications, list items
Sticky Footer min-height: 100vh; flex: 1; Footer pushed to bottom of viewport Full-height pages
Perfect Centering justify-content: center; align-items: center; Center content horizontally and vertically Modals, hero sections, empty states
Responsive Grid flex: 1 1 calc(33.333% - 1rem); min-width: 250px; Flexible columns that stack responsively Alternative to CSS Grid
Space Between justify-content: space-between; Items at edges with equal spacing Form labels, icon bars
Technique Method Description Example
Auto Margins margin-left: auto; Push items to opposite side Login button to right in nav
Equal Widths flex: 1; All items take equal space Button groups, tabs
Fixed + Flexible flex: 0 0 200px; + flex: 1; Fixed sidebar + flexible content Dashboard layouts
Wrap Control flex-wrap: wrap; Items move to next line when no space Tags, chips, badges
Vertical Stack flex-direction: column; Vertical arrangement of items Sidebars, mobile menus
Reverse Order flex-direction: row-reverse; Right-to-left or bottom-to-top ordering RTL layouts, visual reordering
Visual Reordering order: -1 | 0 | 1; Change visual order without DOM changes Mobile menu reordering

Example: Navigation bar

/* Horizontal navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-item {
    flex: none;  /* Fixed size items */
}

/* Push last item to right */
.nav-end {
    margin-left: auto;  /* Pushes to right */
}

/* Full pattern */
<nav class="nav">
    <div class="logo">Logo</div>
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item nav-end">Login</div>
</nav>

Example: Card layout with equal heights

/* Equal height cards */
.card-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 300px;  /* Min 300px, flexible */
    display: flex;
    flex-direction: column;
}

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

.card-footer {
    margin-top: auto;  /* Push to bottom */
}
/* Full page flex layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex: none;  /* Fixed height */
}

.main {
    flex: 1;  /* Fill remaining space */
    display: flex;
}

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

.content {
    flex: 1;  /* Fill remaining width */
}

.aside {
    flex: 0 0 200px;  /* Fixed 200px width */
}

Example: Media object pattern

/* Image + text side-by-side */
.media {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.media-image {
    flex: none;  /* Fixed width image */
    width: 100px;
}

.media-content {
    flex: 1;  /* Text fills remaining space */
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
    .media {
        flex-direction: column;
    }
}
/* Sticky footer pattern */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;  /* Grows to fill space */
}

.footer {
    flex: none;  /* Always at bottom */
}

Example: Responsive grid alternative

/* Flexbox responsive grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex-grid > * {
    flex: 1 1 calc(33.333% - 1rem);  /* 3 columns */
    min-width: 250px;  /* Stack when too narrow */
}

/* 2 columns */
.two-col {
    flex: 1 1 calc(50% - 1rem);
    min-width: 300px;
}

/* 4 columns */
.four-col {
    flex: 1 1 calc(25% - 1rem);
    min-width: 200px;
}

Example: Centering techniques

/* Center single item */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Center multiple items vertically */
.vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    gap: 1rem;
}

/* Center with margin auto */
.container {
    display: flex;
}
.centered-item {
    margin: auto;  /* Centers in both directions */
}

Flexbox Best Practices

  • Use flex: 1 for equal-width items
  • Use gap instead of margins for spacing
  • Use margin-left: auto to push items to the right
  • Use flex-direction: column for vertical layouts
  • Use flex-wrap: wrap for responsive layouts
  • Combine display: flex + justify-content: center + align-items: center for perfect centering
  • Use flex: none for fixed-size items that shouldn't grow/shrink
  • Use Flexbox for 1-dimensional layouts (rows or columns), Grid for 2D layouts

Was this article helpful?

Related Cheat Sheets