CSS Flexbox: The Only Guide You Need

Stop Googling flexbox every time. Bookmark this page instead.

The Container

.container {
  display: flex;
}

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; }

Row (default):          Column:
┌───┬───┬───┐          ┌───┐
│ 1 │ 2 │ 3 │          │ 1 │
└───┴───┴───┘          ├───┤
                        │ 2 │
                        ├───┤
                        │ 3 │
                        └───┘

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)

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 */
}

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  ]

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 */
}

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 */

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;
}

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 */
}

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 */

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  │
└────┴────┴────┘      └─────┴─────┴─────┘   └──────────┴─────┘

flex-shrink (How much to shrink)

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

flex-basis (Initial size)

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

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 */

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; }

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;
}

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; }

Sticky Footer

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

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

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;
}

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.

推荐订阅源

DEV Community