CSS Flexbox: The Only Guide You Need
Stop Googling flexbox every time. Bookmark this page instead.
The Container
CODE
.container {
display: flex;
}
That's it. Everything inside is now a flex item.
Direction: Row vs Column
CODE
/* Horizontal (default) */
.flex-row { flex-direction: row; }
/* Vertical */
.flex-col { flex-direction: column; }
CODE
Row (default): Column:
┌───┬───┬───┐ ┌───┐
│ 1 │ 2 │ 3 │ │ 1 │
└───┴───┴───┘ ├───┤
│ 2 │
├───┤
│ 3 │
└───┘
Alignment (The Tricky Part)
Main Axis vs Cross Axis
CODE
Row layout:
Main axis: → (horizontal)
Cross axis: ↓ (vertical)
Column layout:
Main axis: ↓ (vertical)
Cross axis: → (horizontal)
justify-content (Main Axis)
CODE
.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 */
}
CODE
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)
CODE
.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)
CODE
.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
CODE
/* 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)
CODE
.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)
CODE
.item { flex-grow: 1; } /* Take up equal space */
.item { flex-grow: 2; } /* Take up 2x space */
CODE
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)
CODE
.item { flex-shrink: 0; } /* Don't shrink — keep minimum size */
.item { flex-shrink: 1; } /* Default: shrink equally */
flex-basis (Initial size)
CODE
.item { flex-basis: 200px; } /* Start at 200px before growing/shrinking */
.item { flex-basis: auto; } /* Default: based on content */
The Shorthand: flex
CODE
/* 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
CODE
.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
CODE
.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
CODE
.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
CODE
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content { flex: 1; } /* Takes all available space */
.footer { /* Stays at bottom */ }
Input with Button
CODE
.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.
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR