CSS Flexbox: The Only Guide You Need Stop Googling flexbox every time. Bookmark this page instead. .container { display: flex; } That's it. Everything inside is now a flex item. /* Horizontal (default) */ .flex-row { flex-direction: row; } /* Vertical */ .flex-col { flex-direction: column; } Row (default): Column: ┌───┬───┬───┐ ┌───┐ │ 1 │ 2 │ 3 │ │ 1 │ └───┴───┴───┘ ├───┤ │ 2 │ ├───┤ │ 3 │ └───┘ Row layout: Main axis: → (horizontal) Cross axis: ↓ (vertical) Column layout: Main axis: ↓ (vertical) Cross axis: → (horizontal) .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 ] .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 */ } .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 */ /* Center anything horizontally AND vertically */ .center { display: flex; justify-content: center; align-items: center; } /* Even shorter with grid */ .center { display: grid; place-items: center; } .container { gap: 1rem; /* Same gap in all directions */ row-gap: 0.5rem; /* Gap between rows */ column-gap: 1.5rem; /* Gap between columns */ } .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 │ └────┴────┴────┘ └─────┴─────┴─────┘ └──────────┴─────┘ .item { flex-shrink: 0; } /* Don't shrink — keep minimum size */ .item { flex-shrink: 1; } /* Default: shrink equally */ .item { flex-basis: 200px; } /* Start at 200px before growing/shrinking */ .item { flex-basis: auto; } /* Default: based on content */ /* 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 */ .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-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; } .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; } .page { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; } /* Takes all available space */ .footer { /* Stays at bottom */ } .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; } 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.