Chapter 2.2☕ 16 min read

Flexbox Layout

Create flexible, responsive layouts with Flexbox. Container properties, item properties, and real-world patterns.

01What is Flexbox?

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.

🍽️

Analogy: Think of Flexbox like arranging plates on a dining table at a Hyderabadi wedding — you can space them evenly, push them to ends, or wrap them when there are too many guests!

.flex-container {
  display: flex;           /* Enables flexbox */
  flex-direction: row;     /* Main axis: horizontal */
  flex-wrap: wrap;         /* Wrap on overflow */
  justify-content: center; /* Main axis alignment */
  align-items: stretch;    /* Cross axis alignment */
  gap: 16px;               /* Gap between items */
}

02Flex Container Properties

These properties apply to the parent element (flex container):

PropertyValuesDescription

displayflex | inline-flexEnables flex context for direct children.

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

flex-wrapnowrap | wrap | wrap-reverseControls wrapping behavior.

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

align-itemsstretch | center | flex-start | flex-end | baselineCross axis alignment (single line).

gap<length>Shorthand for row-gap and column-gap.

/* Flex direction — changes main axis */
.row    { display: flex; flex-direction: row; }        /* Default — horizontal */
.column { display: flex; flex-direction: column; }     /* Vertical stacking */

/* Alignment combos */
.center-both { display: flex; justify-content: center; align-items: center; }
.navbar      { display: flex; justify-content: space-between; align-items: center; }
.wrap-grid   { display: flex; flex-wrap: wrap; gap: 1rem; align-content: flex-start; }

03Flex Item Properties

These properties apply to individual children of a flex container:

PropertyValuesDescription

order<integer> (default 0)Controls visual order. Negative moves earlier.

flex-grow<number> (default 0)Ability to grow. 1 = can grow, 0 = no grow.

flex-shrink<number> (default 1)Ability to shrink. 0 = no shrink.

flex-basis<length> | auto (default auto)Initial size before grow/shrink.

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

/* Flex grow — items expand to fill space */
.item { flex: 1; }            /* All items grow equally */
.item:first-child { flex: 2; }  /* This item grows twice as much */

/* Flex basis — starting size */
.item { flex: 0 0 200px; }    /* Fixed 200px — no grow, no shrink */
.item { flex: 1 1 150px; }    /* Start at 150px, grow/shrink as needed */

/* Order — rearrange visually */
.item:last-child { order: -1; }  /* Moves to first position */

/* Align-self — individual alignment */
.item:first-child { align-self: flex-start; }
.item:last-child  { align-self: flex-end; }

04Common Flexbox Patterns

Practical layout patterns you'll use every day:

PatternCodeUse Case

Centered Layout display: flex; justify-content: center; align-items: center; height: 100vh; Modals, cards, login screens

Space Between display: flex; justify-content: space-between; align-items: center; Navbars, toolbars

Responsive Grid display: flex; flex-wrap: wrap; gap: 1.5rem; > * { flex: 1 1 250px; } Card grids, galleries

Sticky Footer body { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; } Page layouts

Holy Grail body { display: flex; flex-direction: column; min-height: 100vh; } .main { display: flex; flex: 1; } Header + sidebar + content + footer

05Exercise — Flexbox Layouts

Practice Flexbox by creating different layouts below.

Create flexbox-layout.html.

Use the starter code and experiment:

<div class="container">
  <div class="item" style="flex:2">Flex: 2</div>
  <div class="item">Flex: 1</div>
  <div class="item">Flex: 1</div>
</div>

Try these experiments:

Create a navbar with logo | links | button using justify-content: space-between Build a card grid with flex-wrap: wrap and flex: 1 1 200px Add order: -1 to move the last item to the first position Use align-content: center with flex-wrap: wrap and enough items to wrap Create a sticky footer layout with flex: 1 on main content

Done — Key Points:

✅ flex-direction sets main axis (row/column). flex-wrap controls multi-line.
✅ justify-content = main axis. align-items = cross axis (1 line). align-content = cross axis (wrap).
✅ flex: 1 = grow+shrink+basis. flex: 0 0 200px = fixed. flex: 1 1 150px = responsive.
✅ order changes visual order. align-self overrides per item.
✅ gap adds spacing between items — works in both row and column directions.
✅ Patterns: centered layout, navbar, responsive grid, sticky footer, holy grail.

Previous2.1 — Flexbox Basics 📋 All Chapters Next Chapter2.3 — Advanced Flexbox →