Flexbox is a one-dimensional layout method for arranging items in rows or columns. Here's how to master it.
Flex Container#
1/* Create flex container */
2.container {
3 display: flex;
4 /* or display: inline-flex; */
5}
6
7/* Direction */
8.container {
9 flex-direction: row; /* Default: left to right */
10 flex-direction: row-reverse; /* Right to left */
11 flex-direction: column; /* Top to bottom */
12 flex-direction: column-reverse; /* Bottom to top */
13}
14
15/* Wrapping */
16.container {
17 flex-wrap: nowrap; /* Default: single line */
18 flex-wrap: wrap; /* Wrap to new lines */
19 flex-wrap: wrap-reverse; /* Wrap upward */
20}
21
22/* Shorthand */
23.container {
24 flex-flow: row wrap;
25 /* flex-direction flex-wrap */
26}Main Axis Alignment#
1/* justify-content: align items on main axis */
2.container {
3 display: flex;
4
5 justify-content: flex-start; /* Start of container */
6 justify-content: flex-end; /* End of container */
7 justify-content: center; /* Center */
8 justify-content: space-between; /* Even space between */
9 justify-content: space-around; /* Even space around */
10 justify-content: space-evenly; /* Equal space everywhere */
11}
12
13/* Row examples */
14.row-start { justify-content: flex-start; }
15/* [item1][item2][item3] */
16
17.row-end { justify-content: flex-end; }
18/* [item1][item2][item3] */
19
20.row-center { justify-content: center; }
21/* [item1][item2][item3] */
22
23.row-between { justify-content: space-between; }
24/* [item1] [item2] [item3] */
25
26.row-around { justify-content: space-around; }
27/* [item1] [item2] [item3] */
28
29.row-evenly { justify-content: space-evenly; }
30/* [item1] [item2] [item3] */Cross Axis Alignment#
1/* align-items: align items on cross axis */
2.container {
3 display: flex;
4 height: 200px; /* Need height for cross-axis */
5
6 align-items: stretch; /* Default: fill container */
7 align-items: flex-start; /* Start of cross axis */
8 align-items: flex-end; /* End of cross axis */
9 align-items: center; /* Center of cross axis */
10 align-items: baseline; /* Text baselines align */
11}
12
13/* Center both axes */
14.centered {
15 display: flex;
16 justify-content: center;
17 align-items: center;
18}Multi-line Alignment#
1/* align-content: align wrapped lines */
2.container {
3 display: flex;
4 flex-wrap: wrap;
5 height: 400px;
6
7 align-content: flex-start; /* Lines at start */
8 align-content: flex-end; /* Lines at end */
9 align-content: center; /* Lines centered */
10 align-content: space-between; /* Even space between lines */
11 align-content: space-around; /* Even space around lines */
12 align-content: stretch; /* Lines stretch to fill */
13}Flex Items#
1/* flex-grow: how much to grow */
2.item {
3 flex-grow: 0; /* Default: don't grow */
4 flex-grow: 1; /* Grow to fill space */
5}
6
7.item-1 { flex-grow: 1; } /* Takes 1 part */
8.item-2 { flex-grow: 2; } /* Takes 2 parts */
9.item-3 { flex-grow: 1; } /* Takes 1 part */
10/* Total: 4 parts. item-2 gets 50%, others get 25% each */
11
12/* flex-shrink: how much to shrink */
13.item {
14 flex-shrink: 1; /* Default: shrink equally */
15 flex-shrink: 0; /* Don't shrink */
16 flex-shrink: 2; /* Shrink twice as much */
17}
18
19/* flex-basis: initial size */
20.item {
21 flex-basis: auto; /* Use width/height */
22 flex-basis: 0; /* Ignore content size */
23 flex-basis: 200px; /* Fixed initial size */
24 flex-basis: 25%; /* Percentage of container */
25}
26
27/* Shorthand */
28.item {
29 flex: 1; /* flex: 1 1 0% */
30 flex: auto; /* flex: 1 1 auto */
31 flex: none; /* flex: 0 0 auto */
32 flex: 2 1 200px; /* grow shrink basis */
33}Individual Item Alignment#
1/* align-self: override align-items for one item */
2.item {
3 align-self: auto; /* Use parent's align-items */
4 align-self: flex-start;
5 align-self: flex-end;
6 align-self: center;
7 align-self: baseline;
8 align-self: stretch;
9}
10
11/* Example: center one item */
12.container {
13 display: flex;
14 align-items: flex-start;
15}
16
17.centered-item {
18 align-self: center;
19}Item Order#
1/* Change visual order without changing HTML */
2.item {
3 order: 0; /* Default */
4}
5
6.first {
7 order: -1; /* Move to start */
8}
9
10.last {
11 order: 1; /* Move to end */
12}
13
14/* Reorder navigation */
15.nav { display: flex; }
16.nav-logo { order: 1; }
17.nav-links { order: 2; }
18.nav-cta { order: 3; }
19
20@media (max-width: 768px) {
21 .nav-logo { order: 2; }
22 .nav-links { order: 3; }
23 .nav-cta { order: 1; }
24}Gap#
1/* Space between items */
2.container {
3 display: flex;
4 gap: 20px; /* All gaps */
5 gap: 20px 10px; /* row-gap column-gap */
6 row-gap: 20px; /* Between rows */
7 column-gap: 10px; /* Between columns */
8}Common Patterns#
1/* Navigation bar */
2.navbar {
3 display: flex;
4 justify-content: space-between;
5 align-items: center;
6 padding: 1rem;
7}
8
9.nav-links {
10 display: flex;
11 gap: 1rem;
12}
13
14/* Card layout */
15.card {
16 display: flex;
17 flex-direction: column;
18}
19
20.card-content {
21 flex: 1; /* Fill available space */
22}
23
24.card-footer {
25 margin-top: auto; /* Push to bottom */
26}
27
28/* Holy Grail layout */
29.layout {
30 display: flex;
31 min-height: 100vh;
32 flex-direction: column;
33}
34
35.main {
36 display: flex;
37 flex: 1;
38}
39
40.sidebar {
41 flex: 0 0 200px; /* Fixed width */
42}
43
44.content {
45 flex: 1; /* Fill remaining */
46}
47
48/* Centered content */
49.centered {
50 display: flex;
51 justify-content: center;
52 align-items: center;
53 min-height: 100vh;
54}Responsive Patterns#
1/* Stack on mobile, row on desktop */
2.container {
3 display: flex;
4 flex-direction: column;
5 gap: 1rem;
6}
7
8@media (min-width: 768px) {
9 .container {
10 flex-direction: row;
11 }
12}
13
14/* Wrap cards */
15.card-grid {
16 display: flex;
17 flex-wrap: wrap;
18 gap: 20px;
19}
20
21.card {
22 flex: 1 1 300px; /* Min 300px, grow/shrink equally */
23 max-width: 400px;
24}
25
26/* Flexible form layout */
27.form-row {
28 display: flex;
29 flex-wrap: wrap;
30 gap: 1rem;
31}
32
33.form-field {
34 flex: 1 1 200px;
35}
36
37.form-field.full-width {
38 flex-basis: 100%;
39}Sticky Footer#
1/* Footer always at bottom */
2body {
3 display: flex;
4 flex-direction: column;
5 min-height: 100vh;
6 margin: 0;
7}
8
9main {
10 flex: 1; /* Grow to fill space */
11}
12
13footer {
14 flex-shrink: 0; /* Don't shrink */
15}Input Group#
1/* Input with button */
2.input-group {
3 display: flex;
4}
5
6.input-group input {
7 flex: 1;
8 border-right: none;
9}
10
11.input-group button {
12 flex-shrink: 0;
13}
14
15/* Input with icon */
16.input-icon {
17 display: flex;
18 align-items: center;
19}
20
21.input-icon .icon {
22 position: absolute;
23 margin-left: 10px;
24}
25
26.input-icon input {
27 padding-left: 40px;
28 flex: 1;
29}Media Object#
1/* Classic media object pattern */
2.media {
3 display: flex;
4 gap: 1rem;
5}
6
7.media-image {
8 flex-shrink: 0;
9}
10
11.media-body {
12 flex: 1;
13}
14
15/* Reversed */
16.media-reverse {
17 flex-direction: row-reverse;
18}Debugging Flexbox#
1/* Visual debugging */
2.debug * {
3 outline: 1px solid red;
4}
5
6.debug .container {
7 outline: 2px solid blue;
8}
9
10/* Common issues: */
11
12/* 1. Items not growing */
13.item {
14 flex-grow: 1; /* Add this */
15}
16
17/* 2. Items overflowing */
18.item {
19 min-width: 0; /* Allow shrinking below content */
20 overflow: hidden;
21}
22
23/* 3. Content breaking layout */
24.item {
25 flex: 1;
26 min-width: 0;
27}
28
29.item img {
30 max-width: 100%;
31}Best Practices#
Container:
✓ Use flex-wrap for responsive
✓ Set gap for spacing
✓ Use justify-content/align-items
✓ Consider flex-direction for stacking
Items:
✓ Use flex shorthand
✓ Set min-width: 0 to allow shrinking
✓ Use flex-basis for initial size
✓ Use order sparingly
Layout:
✓ Combine with CSS Grid
✓ Use for component layouts
✓ Test at different sizes
✓ Consider accessibility (order)
Avoid:
✗ Flexbox for grid layouts (use Grid)
✗ Deep flex nesting
✗ Forgetting min-width: 0
✗ Changing order without reason
Conclusion#
Flexbox excels at one-dimensional layouts - distributing space and aligning items in rows or columns. Use justify-content for main axis alignment, align-items for cross axis, and flex-grow/shrink/basis for item sizing. The gap property simplifies spacing. Combine with CSS Grid for complex layouts: Grid for overall page structure, Flexbox for component-level alignment.