CSS Flexbox is a one-dimensional layout system for arranging items in rows or columns. Here's a complete guide.
Basic Flexbox#
1/* Create flex container */
2.container {
3 display: flex;
4}
5
6/* Inline flex container */
7.inline-container {
8 display: inline-flex;
9}
10
11/* Items become flex items */
12.container > * {
13 /* Flex item properties available */
14}Flex Direction#
1.container {
2 display: flex;
3
4 /* Row (default) - left to right */
5 flex-direction: row;
6
7 /* Row reverse - right to left */
8 flex-direction: row-reverse;
9
10 /* Column - top to bottom */
11 flex-direction: column;
12
13 /* Column reverse - bottom to top */
14 flex-direction: column-reverse;
15}Flex Wrap#
1.container {
2 display: flex;
3
4 /* No wrap (default) */
5 flex-wrap: nowrap;
6
7 /* Wrap to next line */
8 flex-wrap: wrap;
9
10 /* Wrap in reverse */
11 flex-wrap: wrap-reverse;
12}
13
14/* Shorthand: flex-flow */
15.container {
16 flex-flow: row wrap;
17 /* flex-direction flex-wrap */
18}Justify Content (Main Axis)#
1.container {
2 display: flex;
3
4 /* Start (default) */
5 justify-content: flex-start;
6
7 /* End */
8 justify-content: flex-end;
9
10 /* Center */
11 justify-content: center;
12
13 /* Space between items */
14 justify-content: space-between;
15
16 /* Space around items */
17 justify-content: space-around;
18
19 /* Equal space between and around */
20 justify-content: space-evenly;
21}Align Items (Cross Axis)#
1.container {
2 display: flex;
3
4 /* Stretch (default) */
5 align-items: stretch;
6
7 /* Start */
8 align-items: flex-start;
9
10 /* End */
11 align-items: flex-end;
12
13 /* Center */
14 align-items: center;
15
16 /* Baseline alignment */
17 align-items: baseline;
18}Align Content (Multiple Lines)#
1.container {
2 display: flex;
3 flex-wrap: wrap;
4
5 /* Start */
6 align-content: flex-start;
7
8 /* End */
9 align-content: flex-end;
10
11 /* Center */
12 align-content: center;
13
14 /* Space between */
15 align-content: space-between;
16
17 /* Space around */
18 align-content: space-around;
19
20 /* Stretch */
21 align-content: stretch;
22}Gap#
1.container {
2 display: flex;
3 gap: 1rem;
4
5 /* Different row and column gaps */
6 gap: 1rem 2rem; /* row column */
7
8 /* Individual properties */
9 row-gap: 1rem;
10 column-gap: 2rem;
11}Flex Item Properties#
1/* Flex grow - how much to grow */
2.item {
3 flex-grow: 1; /* Take available space */
4}
5
6/* Flex shrink - how much to shrink */
7.item {
8 flex-shrink: 1; /* Allow shrinking */
9 flex-shrink: 0; /* Don't shrink */
10}
11
12/* Flex basis - initial size */
13.item {
14 flex-basis: 200px;
15 flex-basis: 25%;
16 flex-basis: auto; /* Use width/height */
17}
18
19/* Shorthand: flex */
20.item {
21 flex: 1; /* grow:1, shrink:1, basis:0 */
22 flex: 0 1 auto; /* Don't grow, can shrink, auto basis */
23 flex: 1 1 200px; /* Grow, shrink, 200px basis */
24 flex: none; /* 0 0 auto - fixed size */
25}Align Self#
1/* Override align-items for single item */
2.item {
3 align-self: auto; /* Use container'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}Order#
1/* Change visual order */
2.item {
3 order: 0; /* Default */
4}
5
6.item:first-child {
7 order: 2; /* Move to end */
8}
9
10.item:last-child {
11 order: -1; /* Move to start */
12}Centering#
1/* Center single item */
2.container {
3 display: flex;
4 justify-content: center;
5 align-items: center;
6 min-height: 100vh;
7}
8
9/* Center with margin auto */
10.centered-item {
11 margin: auto;
12}Navigation Bar#
1.navbar {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 padding: 1rem 2rem;
6}
7
8.navbar-brand {
9 font-weight: bold;
10}
11
12.navbar-nav {
13 display: flex;
14 gap: 1rem;
15 list-style: none;
16}
17
18.navbar-actions {
19 display: flex;
20 gap: 0.5rem;
21}Card Layout#
1.card {
2 display: flex;
3 flex-direction: column;
4}
5
6.card-image {
7 flex-shrink: 0;
8}
9
10.card-content {
11 flex-grow: 1;
12 padding: 1rem;
13}
14
15.card-footer {
16 margin-top: auto; /* Push to bottom */
17 padding: 1rem;
18 border-top: 1px solid #eee;
19}Holy Grail Layout#
1.layout {
2 display: flex;
3 flex-direction: column;
4 min-height: 100vh;
5}
6
7.header,
8.footer {
9 flex-shrink: 0;
10}
11
12.main {
13 display: flex;
14 flex-grow: 1;
15}
16
17.sidebar {
18 flex: 0 0 200px;
19}
20
21.content {
22 flex-grow: 1;
23 padding: 1rem;
24}Equal Height Columns#
1.row {
2 display: flex;
3}
4
5.column {
6 flex: 1;
7 padding: 1rem;
8}
9
10/* Cards in columns stretch to equal height */
11.card {
12 display: flex;
13 flex-direction: column;
14 height: 100%;
15}Responsive Flexbox#
1.container {
2 display: flex;
3 flex-wrap: wrap;
4 gap: 1rem;
5}
6
7.item {
8 flex: 1 1 100%; /* Full width on mobile */
9}
10
11@media (min-width: 640px) {
12 .item {
13 flex: 1 1 calc(50% - 0.5rem); /* Two columns */
14 }
15}
16
17@media (min-width: 1024px) {
18 .item {
19 flex: 1 1 calc(33.333% - 0.667rem); /* Three columns */
20 }
21}Sticky Footer#
1body {
2 display: flex;
3 flex-direction: column;
4 min-height: 100vh;
5 margin: 0;
6}
7
8main {
9 flex-grow: 1;
10}
11
12footer {
13 flex-shrink: 0;
14}Media Object#
1.media {
2 display: flex;
3 gap: 1rem;
4}
5
6.media-image {
7 flex-shrink: 0;
8 width: 64px;
9 height: 64px;
10}
11
12.media-content {
13 flex-grow: 1;
14}
15
16/* Reverse variant */
17.media-reverse {
18 flex-direction: row-reverse;
19}Form Layout#
1.form-row {
2 display: flex;
3 gap: 1rem;
4 margin-bottom: 1rem;
5}
6
7.form-group {
8 flex: 1;
9}
10
11.form-group.small {
12 flex: 0 0 auto;
13}
14
15/* Input with button */
16.input-group {
17 display: flex;
18}
19
20.input-group input {
21 flex: 1;
22 border-radius: 4px 0 0 4px;
23}
24
25.input-group button {
26 flex-shrink: 0;
27 border-radius: 0 4px 4px 0;
28}Mastering Margin Auto#
1/* Push items apart */
2.container {
3 display: flex;
4}
5
6.item:last-child {
7 margin-left: auto; /* Push to right */
8}
9
10/* Center with auto margins */
11.centered {
12 margin: auto; /* Center both axes */
13}
14
15/* Space between groups */
16.nav {
17 display: flex;
18}
19
20.nav-spacer {
21 margin-left: auto;
22}Best Practices#
Container:
✓ Use gap for spacing
✓ Set flex-wrap for responsive
✓ Use min-height not height
✓ Consider overflow
Items:
✓ Use flex shorthand
✓ Set flex-shrink: 0 for fixed
✓ Use margin-top: auto for push
✓ Avoid fixed widths
Responsive:
✓ Mobile-first approach
✓ Use flex-basis with calc
✓ Change direction at breakpoints
✓ Test at various widths
Avoid:
✗ Nesting too deeply
✗ Using for 2D layouts (use Grid)
✗ Forgetting flex-shrink
✗ Fixed heights that overflow
Conclusion#
Flexbox excels at one-dimensional layouts - rows or columns. Use justify-content for main axis alignment, align-items for cross axis, and gap for spacing. The flex shorthand controls how items grow and shrink. Combine with CSS Grid for complete layout control. For two-dimensional layouts, Grid is often more appropriate.