DEV Community

Alex Chen
Alex Chen

Posted on

CSS Flexbox: The Only Guide You Need

#css #frontend #beginners #tutorial

CSS Flexbox: The Only Guide You Need

Stop Googling flexbox every time. Bookmark this page instead.

The Container 

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

That's it. Everything inside is now a flex item.

Direction: Row vs Column 

/* Horizontal (default) */
.flex-row { flex-direction: row; }

/* Vertical */
.flex-col { flex-direction: column; }
Enter fullscreen mode Exit fullscreen mode 
Row (default):          Column:
┌───┬───┬───┐          ┌───┐
│ 1 │ 2 │ 3 │          │ 1 │
└───┴───┴───┘          ├───┤
                        │ 2 │
                        ├───┤
                        │ 3 │
                        └───┘
Enter fullscreen mode Exit fullscreen mode

Alignment (The Tricky Part)

Main Axis vs Cross Axis 

Row layout:
  Main axis:    → (horizontal)
  Cross axis:  ↓ (vertical)

Column layout:
  Main axis:    ↓ (vertical)
  Cross axis:  → (horizontal)
Enter fullscreen mode Exit fullscreen mode

justify-content (Main Axis) 

.container {
  justify-content: flex-start;    /* Default: items at the start */
  justify-content: flex-end;      /* Items at the end */
  justify-content: center;        /* Items centered */
  justify-content: space-between; /* Equal space between items */
  justify-content: space-around;  /* Equal space around items */
  justify-content: space-evenly;  /* Equal space everywhere */
}
Enter fullscreen mode Exit fullscreen mode 
flex-start:   [1][2][3]              
flex-end:                [1][2][3]
center:         [1][2][3]
space-between: [1]   [2]   [3]
space-around:  [ 1 ] [ 2 ] [ 3 ]
space-evenly:  [  1  ][  2  ][  3  ]
Enter fullscreen mode Exit fullscreen mode

align-items (Cross Axis) 

.container {
  align-items: stretch;    /* Default: items stretch to fill */
  align-items: flex-start; /* Items at the top */
  align-items: flex-end;   /* Items at the bottom */
  align-items: center;     /* Items vertically centered */
  align-items: baseline;   /* Aligned by text baseline */
}
Enter fullscreen mode Exit fullscreen mode

align-self (Per Item Override) 

.container { align-items: center; }

.item-1 { align-self: flex-start; } /* This one goes to the top */
.item-2 { align-self: flex-end; }   /* This one goes to the bottom */
Enter fullscreen mode Exit fullscreen mode

The Centering Trick 

/* Center anything horizontally AND vertically */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Even shorter with grid */
.center {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Gap (Spacing Between Items) 

.container {
  gap: 1rem;         /* Same gap in all directions */
  row-gap: 0.5rem;   /* Gap between rows */
  column-gap: 1.5rem; /* Gap between columns */
}
Enter fullscreen mode Exit fullscreen mode

Flex Item Properties

flex-grow (How much to grow) 

.item { flex-grow: 1; } /* Take up equal space */
.item { flex-grow: 2; } /* Take up 2x space */
Enter fullscreen mode Exit fullscreen mode 
Without flex-grow:     flex-grow: 1:          flex-grow: 2, 1:
┌────┬────┬────┐      ┌─────┬─────┬─────┐   ┌──────────┬─────┐
│ 50 │ 50 │ 50 │      │ 100 │ 100 │ 100 │   │ 200      │ 100 │
│ px  │ px  │ px  │      │ px  │ px  │ px  │   │ px       │ px  │
└────┴────┴────┘      └─────┴─────┴─────┘   └──────────┴─────┘
Enter fullscreen mode Exit fullscreen mode

flex-shrink (How much to shrink) 

.item { flex-shrink: 0; } /* Don't shrink — keep minimum size */
.item { flex-shrink: 1; } /* Default: shrink equally */
Enter fullscreen mode Exit fullscreen mode

flex-basis (Initial size) 

.item { flex-basis: 200px; } /* Start at 200px before growing/shrinking */
.item { flex-basis: auto; }   /* Default: based on content */
Enter fullscreen mode Exit fullscreen mode

The Shorthand: flex 

/* flex: grow shrink basis */
.item { flex: 1; }           /* flex: 1 1 0% */
.item { flex: 0 0 200px; }   /* Fixed 200px, no grow/shrink */
.item { flex: 2 1 100px; }   /* Grow 2x, shrink, start at 100px */
Enter fullscreen mode Exit fullscreen mode

Common Layouts

Navigation Bar 

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

.navbar .logo { flex-shrink: 0; }
.navbar .links { display: flex; gap: 1.5rem; }
Enter fullscreen mode Exit fullscreen mode

Card Layout 

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, minimum 300px */
  max-width: 400px; /* Don't get too wide */
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Holy Grail Layout 

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

.header { /* Fixed height */ }
.footer { /* Fixed height */ margin-top: auto; }

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

.sidebar { flex: 0 0 250px; }
.main { flex: 1; padding: 2rem; }
Enter fullscreen mode Exit fullscreen mode

Sticky Footer 

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

.content { flex: 1; }     /* Takes all available space */
.footer { /* Stays at bottom */ }
Enter fullscreen mode Exit fullscreen mode

Input with Button 

.input-group {
  display: flex;
  gap: 0;
}

.input-group input {
  flex: 1;            /* Input takes remaining space */
  border-radius: 8px 0 0 8px;
}

.input-group button {
  border-radius: 0 8px 8px 0;
}
Enter fullscreen mode Exit fullscreen mode

Quick Reference Card

Property Values Default
flex-direction row, column, row-reverse, column-reverse row
justify-content flex-start, flex-end, center, space-between, space-around, space-evenly flex-start
align-items stretch, flex-start, flex-end, center, baseline stretch
flex-wrap nowrap, wrap, wrap-reverse nowrap
gap length (rem, px, %) 0
flex-grow number 0
flex-shrink number 1
flex-basis auto, length, content auto
align-self auto, flex-start, flex-end, center, stretch auto

What's your favorite flexbox trick? Share it!

Follow @armorbreak for more CSS content.

Top comments (0)