Flexbox Masterclass

The Flexible Box Layout Module (Flexbox) is a one-dimensional layout model designed to distribute space along a single axis (row or column) and align items predictably within a container—even when their sizes are dynamic or unknown.

1. Dual-Axis Architecture

Flexbox operates entirely around two perpendicular axes: the Main Axis and the Cross Axis.

            flex-direction: row (Default)

    ┌───────────────────────────────────────────┐
    │  Main-Start  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─►  Main-End  
    │      │                                    │     (Main Axis)
    │      │  ┌──────────┐  ┌──────────┐        │
    │      │  │  Item 1  │  │  Item 2  │        │
    │      ▼  └──────────┘  └──────────┘        │
    │  Cross-End                                │
    └───────────────────────────────────────────┘
                   (Cross Axis)

Direction & Axis Orientation

The orientation of the main axis is controlled by the flex-direction property:

flex-direction	Main Axis Direction	Cross Axis Direction
row (default)	Left to Right (in LTR documents)	Top to Bottom
row-reverse	Right to Left	Top to Bottom
column	Top to Bottom	Left to Right
column-reverse	Bottom to Top	Left to Right

2. Flex Container Alignment Properties

The flex container governs how items are distributed across both axes.

Main Axis Alignment (justify-content)

Controls how extra free space is distributed along the main axis:

• flex-start: Items pack tightly toward the start edge.
• flex-end: Items pack tightly toward the end edge.
• center: Items align in the middle of the container.
• space-between: First item at start, last item at end, remaining space distributed evenly between items.
• space-around: Equal space on both sides of each item (outer edges get half-width space).
• space-evenly: Equal space between items and container edges.

Cross Axis Alignment (align-items & align-content)

• align-items: Aligns items along the cross axis within a single flex line.
  • stretch (default): Stretches items to fill cross-axis height/width.
  • center: Center-aligns items along the cross axis.
  • flex-start / flex-end: Align items to the start or end of the cross axis.
  • baseline: Aligns items based on their text baseline.
• align-content: Aligns multi-line flex tracks along the cross axis when flex-wrap: wrap is enabled.

3. Flex Item Properties (flex-grow, flex-shrink, flex-basis)

Flex items control their own individual flexibility using the shorthand flex: <grow> <shrink> <basis>.

Shorthand Syntax

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

1. flex-basis

Defines the default size of an item before remaining free space is distributed. It accepts values like auto, content, pixels, or percentages.

2. flex-grow

Determines how much an item will grow relative to sibling items when positive free space exists along the main axis.

$$\text{Flex Factor Share} = \frac{\text{Item Flex Grow Value}}{\sum \text{All Flex Grow Values}}$$

3. flex-shrink

Determines how much an item shrinks relative to sibling items when negative space (overflow) exists along the main axis.

Interactive Playground: Flexbox Alignment Engine

Experiment with main axis distribution and item sizing mechanics in the live preview component below:

Loading Interactive Editor...

4. Popular Flexbox Design Patterns

1. The Perfect Centering Trick

Centering an element vertically and horizontally requires only two properties on the container:

.hero-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Sticky Footer Layout

Ensure footers remain pushed to the bottom of the viewport even on short content pages:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Consumes all available vertical space */
}

Summary Reference Table

Property	Applied To	Default Value	Description
flex-direction	Container	row	Establishes the main axis orientation
justify-content	Container	flex-start	Aligns items along the main axis
align-items	Container	stretch	Aligns items along the cross axis
flex-wrap	Container	nowrap	Controls line wrapping on overflow
flex	Item	0 1 auto	Shorthand for flex-grow, flex-shrink, flex-basis
align-self	Item	auto	Overrides container's align-items for a specific item