CSS Flexbox Advanced

Introduction

Flexbox becomes extremely powerful once you understand advanced properties: alignment tricks, flexible sizing, wrapping, spacing control, and responsive layout behavior. This tutorial covers the pro-level stuff.

1. flex-grow / flex-shrink / flex-basis

These control how flex items resize.

.item {
  flex-grow: 1;   /* expands if space available */
  flex-shrink: 1; /* shrinks if needed */
  flex-basis: 200px; /* starting size */
}

2. flex: Shorthand

.item {
  flex: 1 0 150px; /* grow shrink basis */
}

3. align-content (for multi-row flex)

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

4. flex-wrap

.container {
  display: flex;
  flex-wrap: wrap;
}

5. order: Control Item Order

You can reorder items without changing HTML.

.item-1 { order: 3; }
.item-2 { order: 1; }
.item-3 { order: 2; }

6. Advanced Alignment Tricks

/* Center both horizontally + vertically */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

7. Space Between Grid-Like Layouts

.container {
  display: flex;
  gap: 20px;
}

8. Responsive Flexbox Cards

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 250px;
  background: #1e1e1e;
  padding: 20px;
}

9. Auto Margins for Alignment

Push elements left/right easily.

.profile {
  margin-left: auto; /* pushes it to the right */
}

10. Vertical Flexbox Layout

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0;
}

.content {
  flex: 1;
}

.footer {
  flex: 0;
}

11. Equal-Height Columns

.columns {
  display: flex;
}

.columns > div {
  flex: 1;
}

12. Sidebar + Content Layout

.wrapper {
  display: flex;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

Summary