ReviseAlgo Logo

Layout

Flexbox

Master the CSS Flexible Box Layout (Flexbox), covering flex containers, alignment properties, flex-direction, wrapping, and flex grow, shrink, and basis math.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master building one-dimensional page layouts using Flexbox. By the end of this topic, you will be able to:

  • Differentiate between flex containers (parents) and flex items (children).
  • Control alignment along the main axis using justify-content and the cross axis using align-items.
  • Manipulate layout orientation using the flex-direction property.
  • Manage item wrapping using flex-wrap.
  • Calculate item dimensions using flex-grow, flex-shrink, and flex-basis properties.

2. Overview

The Flexible Box Layout (Flexbox) is a one-dimensional layout model designed for distributing space and aligning items within a container. It allows items to grow to fill unused space or shrink to prevent container overflows, handling vertical and horizontal alignments automatically without requiring float declarations.

3. Why This Topic Matters

Flexbox is the standard tool for one-dimensional layouts (rows or columns). Misunderstanding its sizing math leads to unexpected spacing bugs:

  • Unintended Scaling: In a flex container, elements may shrink or stretch past their declared width. If you do not understand the differences between flex-basis, flex-grow, and flex-shrink, you will find it difficult to keep key layout elements (like icons or status badges) from distorting.
  • Main vs Cross Axis confusion: When you change flex-direction from row to column, the main axis and cross axis swap. This changes the behavior of your alignment properties (justify-content and align-items).

4. Real-World Analogy

Think of a flex container like **passengers seating inside a shared limousine car**:

  • The Limousine Cabin (Flex Container): A unified seating row that expands or shrinks.
  • The Direction (flex-direction): Arranging seats in a single long row (row) or facing each other in vertical rows (column).
  • Seating Comfort (flex-grow / flex-shrink):
    • flex-grow: How much extra legroom a passenger takes up if seats next to them are empty.
    • flex-shrink: How much a passenger squeezes into their seat if the limousine cabin gets crowded, making space for others.
    • flex-basis: The default seat size a passenger expects before any resizing happens.

5. Core Concepts

Understanding the two axes is critical when using Flexbox:

  • Main Axis: The primary axis along which flex items are laid out. If flex-direction is set to row, the main axis runs horizontally. If set to column, it runs vertically.
  • Cross Axis: The axis perpendicular to the main axis. If flex-direction is set to row, the cross axis runs vertically. If set to column, it runs horizontally.
Property Target Description
justify-content Container Aligns flex items along the main axis (e.g. center, space-between, space-around).
align-items Container Aligns flex items along the cross axis (e.g. stretch, center, flex-start, flex-end).
flex-basis Item Defines the default size of a flex item before empty space is distributed.
flex-grow Item Specifies how much a flex item should grow relative to other items if space is available.
flex-shrink Item Specifies how much a flex item should shrink relative to other items if space is limited.

6. Syntax & API Reference

Below is a typical CSS configuration for a flexbox grid container:

7. Visual Diagram

This diagram displays how flex-direction swaps the main and cross axes:

8. Live Example — Full Working Code

A sample HTML document showcasing navigation alignments and growing card columns:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the flex-direction of the card grid container from row to column and notice how the axes swap.
  2. Set one of the card elements to flex-grow: 2 while keeping others at flex-grow: 1 to see how empty space is distributed.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Assuming align-items controls vertical spacing in columns Forgetting that when `flex-direction` is set to `column`, the main axis is vertical, meaning `justify-content` now controls vertical alignment. flex-direction: column;
align-items: center; (expects vertical centering)		 flex-direction: column;
justify-content: center;
Badge/icon shrinkage Failing to set `flex-shrink: 0` on fixed-size child elements (like icons), causing them to squeeze when container space is tight. .icon { width: 50px; } (gets squeezed) .icon { width: 50px; flex-shrink: 0; }

11. Best Practices

  • Set flex-shrink: 0 for fixed elements: Always declare flex-shrink: 0 on fixed-size elements (like profile images, icons, or badges) inside a flexbox container to prevent them from distorting.
  • Use the flex shorthand: Use the flex shorthand property (e.g. flex: 1 1 200px) instead of declaring flex-grow, flex-shrink, and flex-basis properties individually.
  • Use gap for grid spacing: Use the gap property to set spacing between flex items rather than using margins on individual child elements.
  • Change axes with flex-direction: Remember that changing flex-direction to column swaps the behavior of justify-content and align-items.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
display: flex support Supported (21+) Supported (28+) Supported (6.1+) Supported (12+)
flexbox gap property support Supported (84+) Supported (63+) Supported (14.1+) Supported (84+)

13. Interview Questions

🟢 Q1: How does flex-basis differ from declared width on flex items?

Answer: flex-basis sets the default size of a flex item before any empty space is distributed. width sets a fixed size limit on the element. The browser prioritizes flex-basis over width on flex items, and allows items to grow or shrink dynamically if flex-grow or flex-shrink values are declared.

14. Debugging Exercise

Explain why the status label gets squeezed on small screen widths, and fix the CSS configuration:

View Solution

Diagnosis: By default, flex items have a flex-shrink value of 1. When container space is tight, the browser squeezes all flex items to prevent overflows. Since the status tag has no minimum size restrictions, its width is compressed. To prevent this, set flex-shrink: 0 on the status tag.

Fixed CSS:

15. Practice Exercises

Exercise 1: Horizontal Card Grid with Center Alignments

Build a horizontal row containing three cards. Use Flexbox properties to center the text content horizontally and vertically inside the cards.

16. Scenario-Based Challenge

The Multi-device Toolbar Alignment Challenge:

A business dashboard toolbar displays search filters, page counts, and an actions panel. On desktop screens, these items align in a single horizontal row. On mobile screens, the search filters wrap and take up the full screen width, while the page counts and actions panel align side-by-side below. Propose an implementation plan using Flexbox to build this layout.

17. Quick Quiz

Q1: Which flexbox container property is used to align flex items along the cross axis?

A) justify-content

B) align-items

C) flex-direction

Answer: B — The align-items property manages alignment along the cross axis.

18. Summary & Key Takeaways

  • • Flexbox is designed for one-dimensional layouts along rows or columns.
  • • Set flex-shrink: 0 on fixed elements inside a flexbox container to prevent them from shrinking or distorting.

19. Cheat Sheet

Property Visual Layout Action
display: flex; Converts the container into a flex container and all its children into flex items.