Chapter 2.1☕ 14 min read

Flexbox Basics

Learn how to create flexible, responsive layouts with Flexbox. Layout ka asli power Flexbox mein hai.

01Understanding Positioning

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill available space and shrink to fit smaller spaces.

Flexbox works on two axes: the main axis (defined by flex-direction) and the cross axis (perpendicular to it). Properties like justify-content work on the main axis and align-items on the cross axis.

🍽️

Analogy: Think of Flexbox like arranging plates on a dining table at a Hyderabadi wedding — you can space them evenly (space-between), push them to one end (flex-start), or center them (center).

.flex-container {
  display: flex;           /* Enables flexbox */
  justify-content: center; /* Main axis alignment */
  align-items: center;     /* Cross axis alignment */
  gap: 16px;               /* Space between items */
}

.flex-item {
  flex: 1;                 /* Grow/shrink equally */
  padding: 16px;
  background: #f97316;
}

02Offset Properties

Essential Flexbox properties explained:

Property Values Description

displayflex | inline-flexDefines a flex container for all direct children.

flex-directionrow | column | row-reverse | column-reverseSets the main axis direction.

flex-wrapnowrap | wrap | wrap-reverseControls whether items wrap to multiple lines.

justify-contentflex-start | center | space-between | space-around | space-evenlyMain axis alignment.

align-itemsstretch | flex-start | flex-end | center | baselineCross axis alignment.

gap<length>Space between items — works in both axes.

.row    { display: flex; flex-direction: row; }        /* Horizontal (default) */
.column { display: flex; flex-direction: column; }     /* Vertical */
.center { display: flex; justify-content: center; align-items: center; }  /* Both axes */

/* Nav pattern */
.navbar { display: flex; justify-content: space-between; align-items: center; }

03Z-Index and Stacking Context

Flex item properties for fine-tuning individual items:

Property Values Description

flexgrow shrink basisShorthand: flex: 1 = flex: 1 1 0%

flex-grow<number> (default 0)How much an item can grow relative to others.

flex-shrink<number> (default 1)How much an item can shrink.

flex-basis<length> | autoInitial size before growing/shrinking.

align-selfauto | flex-start | center | flex-end | stretchOverride align-items for one item.

order<integer>Change visual order without changing HTML.

.item { flex: 1; }              /* Grow equally — all items share space */
.item { flex: 0 0 200px; }     /* Fixed width — no grow, no shrink, 200px */
.item { flex: 1 1 150px; }     /* Grow, shrink, start at 150px */
.item:nth-child(2) { align-self: flex-end; }  /* Override for one item */
.item:last-child { order: -1; }               /* Move to first position */

04Fixed vs Sticky Positioning

Common Flexbox patterns you'll use every day:

/* Pattern 1: Centered Layout */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Pattern 2: Space Between (Navbar) */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

/* Pattern 3: Responsive Grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.grid > * {
  flex: 1 1 250px;  /* Min 250px, grow to fill */
}

/* Pattern 4: Sticky Footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content { flex: 1; }  /* Pushes footer down */
.footer { flex: 0; }

💡

Pro Tip: flex: 1 is the most common flex value — it tells the item to grow and take available space. Use flex-wrap: wrap with flex: 1 1 200px for responsive grids without media queries.

05Exercise — Positioning Playground

Write CSS below and practice Flexbox. Create different layouts and see how items behave.

Open VS Code. Create flexbox-practice.html.

Use the starter code and experiment:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox Practice</title>
  <style>
    .container { display: flex; height: 200px; border: 2px dashed #f97316; border-radius: 8px; padding: 10px; gap: 10px; }
    .item { background: #f97316; color: white; padding: 10px; border-radius: 4px; text-align: center; flex: 1; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

Try these experiments:

Change justify-content to space-between, center, flex-start Set flex-direction: column — items stack vertically Add more items and use flex-wrap: wrap Give one item align-self: flex-end — it drops to the bottom Set flex: 0 0 200px on one item — fixed width, no grow

Done — Key Points:

✅ display: flex enables flexbox. Main axis = flex-direction, cross axis = perpendicular.
✅ justify-content aligns on main axis. align-items aligns on cross axis.
✅ flex: 1 = grow equally. flex: 0 0 200px = fixed width.
✅ flex-wrap: wrap creates responsive multi-line layouts. gap adds spacing.
✅ align-self overrides align-items for individual items. order changes visual order.
✅ Common patterns: centered layout (justify+align center), navbar (space-between), sticky footer (flex:1 on content).

Previous1.7 — Positioning & Layout Flow 📋 All Chapters Next Chapter2.2 — Flexbox Layout →