Flexbox in CSS

Analogy categoryAnalogies

Introduction

Flexbox (the Flexible Box Layout) is a one-dimensional layout system designed to distribute space among items in a container and align them, even when their size is unknown or dynamic. Setting display: flex on a parent turns it into a flex container, and its direct children automatically become flex items that can grow, shrink, and be aligned along a main axis and a cross axis.

🏏

Cricket analogy: Flexbox is like a fielding captain arranging players along the boundary rope (main axis) and adjusting their depth (cross axis) without knowing each fielder's exact reach, redistributing coverage dynamically as the field changes.

Syntax

css

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | center | flex-end | baseline;
  align-content: stretch | center | space-between;
  gap: 16px;
}

.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  flex: 1 1 auto; /* shorthand: grow shrink basis */
  align-self: auto | center | flex-end;
}

Explanation

flex-direction sets the main axis (row = horizontal, column = vertical). justify-content aligns items along the main axis, while align-items aligns items along the cross axis. flex-wrap allows items to wrap onto multiple lines instead of shrinking to fit one line. On individual items, flex-grow defines how much an item expands to fill leftover space relative to siblings (a ratio, default 0), flex-shrink defines how much it shrinks when space is insufficient (default 1), and flex-basis sets its starting size before growing/shrinking (default auto, meaning use the item's content/width). The flex shorthand combines all three — flex: 1 is shorthand for flex: 1 1 0%, a very common 'equal share' pattern. align-self overrides align-items for a single item.

🏏

Cricket analogy: flex-direction sets whether the field is read left-to-right or top-to-bottom; justify-content spaces fielders along the boundary; flex-grow is like giving extra ground coverage to a taller fielder relative to others, while flex: 1 splits coverage equally among all fielders.

Example

css

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

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

.card-row .card {
  flex: 1 1 250px; /* grow, shrink, base width 250px */
}

Output

In .navbar, the logo and nav links are pushed to opposite ends and vertically centered. In .card-row, cards start at 250px wide, grow to fill extra row space equally, shrink when the row is too narrow, and wrap onto a new line once they can no longer fit at their minimum basis.

🏏

Cricket analogy: In .navbar, the team logo and score links sit at opposite ends of the scoreboard and are vertically centered, just like flexbox's justify-content: space-between and align-items: center; in .card-row, player cards start at a minimum width, grow to fill the row, and wrap onto a new row when the lineup grows too long.

Use flex: 1 on items you want to share remaining space equally, and flex: 0 0 auto on items that should keep their natural size (e.g. icons) without growing or shrinking.

Key Takeaways

display: flex establishes a flex container; direct children become flex items automatically.
justify-content aligns along the main axis; align-items aligns along the cross axis.
flex-grow, flex-shrink, and flex-basis together control an item's final size via the flex shorthand.
flex-wrap lets items flow onto multiple lines instead of being squeezed into one.
align-self overrides the container's align-items for one specific item.