CSS Flexbox: Layout Guide and Practice

One of the most frequent CSS layout questions is:

Explain how Flexbox works. How do flex-grow, flex-shrink, and flex-basis interact to determine the final size of a flex item?

Flexbox (Flexible Box Layout) is a one-dimensional layout model designed to distribute space along a single axis (either horizontally or vertically) and align items dynamically inside a container.

To answer this comprehensively, you need to understand:

• The concept of Main Axis vs. Cross Axis.
• Flex container (parent) properties.
• Flex item (child) sizing calculation mechanics (grow, shrink, basis).
• Common alignment and layout practices.

1. Main Axis vs. Cross Axis

Flexbox aligns items along two axes. The directions of these axes depend on the parent's flex-direction:

flex-direction: row (Default)
┌───────────────────────────────────────────────┐ ──► Main Axis (Horizontal)
│  ┌──────────┐   ┌──────────┐   ┌──────────┐   │
│  │ Flex Item│   │ Flex Item│   │ Flex Item│   │
│  └──────────┘   └──────────┘   └──────────┘   │
└───────────────────────────────────────────────┘
                                                │
                                                ▼ Cross Axis (Vertical)
 
flex-direction: column
┌──────────────────┐ ──► Cross Axis (Horizontal)
│  ┌──────────┐    │
│  │ Flex Item│    │
│  ├──────────┤    │
│  │ Flex Item│    │
│  └──────────┘    │
└──────────────────┘
         │
         ▼ Main Axis (Vertical)

• Main Axis: The primary axis along which flex items are laid out. Governed by justify-content.
• Cross Axis: The perpendicular axis to the main axis. Governed by align-items and align-self.

2. Parent Container Properties

To create a flex layout, set display: flex or display: inline-flex on the parent container.

• flex-direction: Defines the main axis direction (row, row-reverse, column, column-reverse).
• flex-wrap: Toggles whether items wrap onto multiple lines if space runs out (nowrap, wrap, wrap-reverse).
• justify-content: Aligns items along the main axis (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Aligns items along the cross axis for the current row (stretch, flex-start, flex-end, center, baseline).
• align-content: Aligns multi-line flex rows along the cross axis when wrapping occurs (stretch, flex-start, flex-end, center, space-between, space-around).

3. Flex Item Sizing: The Flex Trinity

Sizing on a flex item is controlled by three properties combined in the shorthand flex: <grow> <shrink> <basis>.

A. flex-basis

Defines the initial size of the flex item before free space is distributed. It acts like a flexible width (in row direction) or height (in column direction).

• Default: auto (looks at width/height or content size).

B. flex-grow

Defines the ability of an item to grow if there is remaining free space in the flex container.

• Value is a unitless proportion (e.g., 1, 2). If all items have flex-grow: 1, they share remaining space equally.

C. flex-shrink

Defines the ability of an item to shrink if the container's space is smaller than the sum of all items' flex-basis values (preventing overflow).

• Default: 1 (items shrink proportionally to prevent overflow). Set to 0 to prevent shrinking entirely.

4. Sizing Calculation Logic

Suppose we have a container with a width of 500px containing two items:

• Item A: flex-basis: 100px, flex-grow: 1
• Item B: flex-basis: 200px, flex-grow: 2

Sizing Step-by-Step:

1. Initial Sizes: Sum of items' basis = 100px + 200px = 300px.
2. Remaining Free Space: Container width - initial sizes = 500px - 300px = 200px.
3. Grow Distribution:
   • Total grow factors = 1 + 2 = 3.
   • Item A gets: 1/3 * 200px = 66.6px. Final width = 166.6px.
   • Item B gets: 2/3 * 200px = 133.3px. Final width = 333.3px.

Key Takeaways

• One-Dimensional: Flexbox lays out elements along a single direction (row or column).
• Flex Trinity: flex-grow distributes positive extra space, flex-shrink handles negative space (overflow), and flex-basis defines starting size.
• Centering Trick: Centering an element both horizontally and vertically is as simple as:

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

• Flex Wrap creates separate lines: When wrapping occurs, each wrap row is treated as its own independent flex container for alignment.