Flexbox simplifies complex layouts. Here are practical patterns for common UI challenges.
Flexbox Fundamentals#
1/* Container properties */
2.flex-container {
3 display: flex;
4
5 /* Main axis direction */
6 flex-direction: row; /* row | row-reverse | column | column-reverse */
7
8 /* Wrapping */
9 flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
10
11 /* Main axis alignment */
12 justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
13
14 /* Cross axis alignment */
15 align-items: center; /* flex-start | flex-end | center | stretch | baseline */
16
17 /* Multi-line cross axis */
18 align-content: flex-start; /* flex-start | flex-end | center | stretch | space-between | space-around */
19
20 /* Gap between items */
21 gap: 1rem;
22}
23
24/* Item properties */
25.flex-item {
26 /* Growth factor */
27 flex-grow: 1;
28
29 /* Shrink factor */
30 flex-shrink: 0;
31
32 /* Base size */
33 flex-basis: 200px;
34
35 /* Shorthand: grow shrink basis */
36 flex: 1 0 200px;
37
38 /* Individual alignment */
39 align-self: flex-end;
40
41 /* Order */
42 order: 1;
43}Centering Patterns#
1/* Perfect centering */
2.center-both {
3 display: flex;
4 justify-content: center;
5 align-items: center;
6 min-height: 100vh;
7}
8
9/* Center horizontally */
10.center-horizontal {
11 display: flex;
12 justify-content: center;
13}
14
15/* Center vertically */
16.center-vertical {
17 display: flex;
18 align-items: center;
19 min-height: 100%;
20}
21
22/* Center with margin auto */
23.center-auto {
24 display: flex;
25}
26
27.center-auto .item {
28 margin: auto; /* Centers both directions */
29}
30
31/* Center text and icon */
32.button {
33 display: inline-flex;
34 align-items: center;
35 justify-content: center;
36 gap: 0.5rem;
37}Navigation Patterns#
1/* Basic navbar */
2.navbar {
3 display: flex;
4 align-items: center;
5 justify-content: space-between;
6 padding: 1rem 2rem;
7}
8
9.nav-links {
10 display: flex;
11 gap: 2rem;
12 list-style: none;
13}
14
15/* Logo left, links center, actions right */
16.navbar-three-section {
17 display: flex;
18 align-items: center;
19}
20
21.navbar-three-section .logo {
22 flex: 1;
23}
24
25.navbar-three-section .nav-links {
26 flex: 2;
27 justify-content: center;
28}
29
30.navbar-three-section .actions {
31 flex: 1;
32 justify-content: flex-end;
33 display: flex;
34}
35
36/* Mobile-first responsive nav */
37.responsive-nav {
38 display: flex;
39 flex-direction: column;
40 gap: 1rem;
41}
42
43@media (min-width: 768px) {
44 .responsive-nav {
45 flex-direction: row;
46 justify-content: space-between;
47 align-items: center;
48 }
49}Card Layouts#
1/* Card grid with flexbox */
2.card-container {
3 display: flex;
4 flex-wrap: wrap;
5 gap: 1.5rem;
6}
7
8.card {
9 flex: 1 1 300px; /* Grow, shrink, min-width */
10 max-width: 400px;
11}
12
13/* Card with footer at bottom */
14.card-vertical {
15 display: flex;
16 flex-direction: column;
17 height: 100%;
18}
19
20.card-vertical .card-body {
21 flex: 1; /* Takes remaining space */
22}
23
24.card-vertical .card-footer {
25 margin-top: auto; /* Pushes to bottom */
26}
27
28/* Horizontal card */
29.card-horizontal {
30 display: flex;
31 gap: 1rem;
32}
33
34.card-horizontal .card-image {
35 flex: 0 0 200px; /* Fixed width */
36}
37
38.card-horizontal .card-content {
39 flex: 1;
40 display: flex;
41 flex-direction: column;
42}Form Layouts#
1/* Inline form */
2.form-inline {
3 display: flex;
4 gap: 1rem;
5 align-items: flex-end;
6}
7
8.form-inline .form-group {
9 flex: 1;
10}
11
12.form-inline button {
13 flex-shrink: 0;
14}
15
16/* Input with button */
17.input-group {
18 display: flex;
19}
20
21.input-group input {
22 flex: 1;
23 border-radius: 4px 0 0 4px;
24}
25
26.input-group button {
27 flex-shrink: 0;
28 border-radius: 0 4px 4px 0;
29}
30
31/* Label and input side by side */
32.form-row {
33 display: flex;
34 align-items: center;
35 gap: 1rem;
36}
37
38.form-row label {
39 flex: 0 0 150px;
40 text-align: right;
41}
42
43.form-row input {
44 flex: 1;
45}Sidebar Layouts#
1/* Fixed sidebar, flexible main */
2.layout-sidebar {
3 display: flex;
4 min-height: 100vh;
5}
6
7.sidebar {
8 flex: 0 0 250px; /* Fixed width */
9 /* Or use width for better control */
10 width: 250px;
11 flex-shrink: 0;
12}
13
14.main-content {
15 flex: 1;
16 min-width: 0; /* Prevents overflow */
17}
18
19/* Collapsible sidebar */
20.sidebar.collapsed {
21 flex-basis: 60px;
22 width: 60px;
23}
24
25/* Sidebar with sticky positioning */
26.sidebar-sticky {
27 position: sticky;
28 top: 0;
29 height: 100vh;
30 overflow-y: auto;
31}Footer Patterns#
1/* Sticky footer (stays at bottom) */
2.page-container {
3 display: flex;
4 flex-direction: column;
5 min-height: 100vh;
6}
7
8.page-content {
9 flex: 1;
10}
11
12.footer {
13 flex-shrink: 0;
14}
15
16/* Multi-column footer */
17.footer-columns {
18 display: flex;
19 flex-wrap: wrap;
20 gap: 2rem;
21 justify-content: space-between;
22}
23
24.footer-column {
25 flex: 1 1 200px;
26}
27
28/* Footer with copyright */
29.footer-bottom {
30 display: flex;
31 justify-content: space-between;
32 align-items: center;
33 flex-wrap: wrap;
34 gap: 1rem;
35}Holy Grail Layout#
1/* Classic holy grail with flexbox */
2.holy-grail {
3 display: flex;
4 flex-direction: column;
5 min-height: 100vh;
6}
7
8.holy-grail header,
9.holy-grail footer {
10 flex-shrink: 0;
11}
12
13.holy-grail main {
14 display: flex;
15 flex: 1;
16}
17
18.holy-grail .sidebar-left {
19 flex: 0 0 200px;
20 order: -1; /* Move before content in DOM */
21}
22
23.holy-grail .content {
24 flex: 1;
25 min-width: 0;
26}
27
28.holy-grail .sidebar-right {
29 flex: 0 0 200px;
30}
31
32/* Responsive holy grail */
33@media (max-width: 768px) {
34 .holy-grail main {
35 flex-direction: column;
36 }
37
38 .holy-grail .sidebar-left,
39 .holy-grail .sidebar-right {
40 flex-basis: auto;
41 order: 0;
42 }
43}Media Object#
1/* Classic media object */
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 min-width: 0; /* Allows text truncation */
14}
15
16/* Nested media objects */
17.media .media {
18 margin-top: 1rem;
19}
20
21/* Media with actions */
22.media-with-actions {
23 display: flex;
24 gap: 1rem;
25 align-items: flex-start;
26}
27
28.media-with-actions .media-content {
29 flex: 1;
30}
31
32.media-with-actions .media-actions {
33 flex-shrink: 0;
34 display: flex;
35 gap: 0.5rem;
36}Equal Height Columns#
1/* Equal height cards */
2.equal-height-container {
3 display: flex;
4 gap: 1rem;
5}
6
7.equal-height-container > * {
8 flex: 1;
9 display: flex;
10 flex-direction: column;
11}
12
13/* Equal height with content alignment */
14.pricing-cards {
15 display: flex;
16 gap: 2rem;
17}
18
19.pricing-card {
20 flex: 1;
21 display: flex;
22 flex-direction: column;
23}
24
25.pricing-card .features {
26 flex: 1; /* Pushes button to bottom */
27}
28
29.pricing-card .cta-button {
30 margin-top: auto;
31}Responsive Patterns#
1/* Flex to stack */
2.flex-stack {
3 display: flex;
4 gap: 1rem;
5}
6
7@media (max-width: 640px) {
8 .flex-stack {
9 flex-direction: column;
10 }
11}
12
13/* Reverse order on mobile */
14.flex-reverse-mobile {
15 display: flex;
16}
17
18@media (max-width: 640px) {
19 .flex-reverse-mobile {
20 flex-direction: column-reverse;
21 }
22}
23
24/* Auto-wrapping grid */
25.auto-grid {
26 display: flex;
27 flex-wrap: wrap;
28 gap: 1rem;
29}
30
31.auto-grid > * {
32 flex: 1 1 calc(33.333% - 1rem);
33 min-width: 250px;
34}
35
36/* Responsive columns */
37.responsive-columns {
38 display: flex;
39 flex-wrap: wrap;
40 margin: -0.5rem;
41}
42
43.responsive-columns > * {
44 padding: 0.5rem;
45 flex: 1 1 100%;
46}
47
48@media (min-width: 640px) {
49 .responsive-columns > * {
50 flex: 1 1 50%;
51 }
52}
53
54@media (min-width: 1024px) {
55 .responsive-columns > * {
56 flex: 1 1 33.333%;
57 }
58}Utility Classes#
1/* Flexbox utilities (Tailwind-style) */
2.flex { display: flex; }
3.inline-flex { display: inline-flex; }
4
5/* Direction */
6.flex-row { flex-direction: row; }
7.flex-col { flex-direction: column; }
8.flex-row-reverse { flex-direction: row-reverse; }
9.flex-col-reverse { flex-direction: column-reverse; }
10
11/* Wrap */
12.flex-wrap { flex-wrap: wrap; }
13.flex-nowrap { flex-wrap: nowrap; }
14
15/* Justify */
16.justify-start { justify-content: flex-start; }
17.justify-center { justify-content: center; }
18.justify-end { justify-content: flex-end; }
19.justify-between { justify-content: space-between; }
20.justify-around { justify-content: space-around; }
21.justify-evenly { justify-content: space-evenly; }
22
23/* Align */
24.items-start { align-items: flex-start; }
25.items-center { align-items: center; }
26.items-end { align-items: flex-end; }
27.items-stretch { align-items: stretch; }
28
29/* Flex values */
30.flex-1 { flex: 1 1 0%; }
31.flex-auto { flex: 1 1 auto; }
32.flex-none { flex: none; }
33.flex-grow { flex-grow: 1; }
34.flex-shrink-0 { flex-shrink: 0; }
35
36/* Gap */
37.gap-1 { gap: 0.25rem; }
38.gap-2 { gap: 0.5rem; }
39.gap-4 { gap: 1rem; }
40.gap-8 { gap: 2rem; }Best Practices#
Layout Choice:
✓ Use flexbox for 1D layouts
✓ Use grid for 2D layouts
✓ Combine both when needed
✓ Consider content flow
Performance:
✓ Avoid deep nesting
✓ Use gap instead of margins
✓ Set explicit dimensions when possible
✓ Test with varying content
Accessibility:
✓ Maintain logical DOM order
✓ Use order sparingly
✓ Test with screen readers
✓ Ensure focus order makes sense
Conclusion#
Flexbox handles most modern layout challenges elegantly. Use it for navigation, cards, forms, and responsive layouts. Combine with CSS Grid for complex two-dimensional layouts. Master these patterns and you'll handle any UI layout requirement efficiently.