EN/CH Mode

BRUCE_FE CSS Interview Notes - Flexbox Key Points

Deeply understand CSS Flexbox layout model, master key properties of flex containers and items, learn alignment methods like justify-content and align-items, and core concepts of flexible space distribution like flex-grow and flex-shrink.

EN/CH Mode

Lazy to read articles? Then watch videos!

Key Properties of Flex Containers

The first step in creating a Flex layout is to set an element as a Flex container, then its child elements automatically become Flex items:

.container {
  display: flex; /* or display: inline-flex */
}

Main properties of Flex containers:

flex-direction

Defines the main axis direction, determining the arrangement direction of Flex items.

1. row (default): left to right
2. row-reverse: right to left
3. column: top to bottom
4. column-reverse: bottom to top

flex-wrap

Defines whether Flex items wrap to the next line when they don't fit in one row.

1. nowrap (default): no wrapping
2. wrap: wrap, first line on top
3. wrap-reverse: wrap, first line at bottom

justify-content

Defines the alignment of Flex items along the main axis.

1. flex-start (default): left align
2. flex-end: right align
3. center: center align
4. space-between: justify with equal spacing between items
5. space-around: equal spacing around each item
6. space-evenly: evenly distributed spacing between items

align-items

Defines the alignment of Flex items along the cross axis.

1. stretch (default): if height not set, fills entire container height
2. flex-start: align to cross axis start
3. flex-end: align to cross axis end
4. center: center align on cross axis
5. baseline: align to baseline of first line of text

align-content

Defines alignment of multi-line Flex items along cross axis (only effective when flex-wrap: wrap).

1. stretch (default): fills entire cross axis
2. flex-start: align to cross axis start
3. flex-end: align to cross axis end
4. center: center align on cross axis
5. space-between: justify on cross axis
6. space-around: equal spacing around each line

gap

Defines the gap between Flex items.

1. gap: 10px; (set same gap for rows and columns)
2. row-gap: 10px; (set row gap)
3. column-gap: 20px; (set column gap)

Visual examples:

justify-content: space-between

Item 1

Item 2

Item 3

align-items: center

Short

Tall

Medium

flex-direction: column

Top

Middle

Bottom

Key Properties of Flex Items

Besides container properties, Flex items also have their own set of properties for controlling how individual items stretch and align:

flex-grow

Defines the growth ratio of items when there's remaining space.

Default: 0 (no growth)

Larger values occupy more remaining space

flex-shrink

Defines the shrink ratio of items when space is insufficient.

Default: 1 (proportionally shrink when space insufficient)

Larger values shrink more; 0 means no shrinking

flex-basis

Defines the initial size of items before stretching.

Default: auto (item's own size)

Can be set to specific dimensions (px, %, rem, etc.)

flex

Shorthand for flex-grow, flex-shrink and flex-basis.

Default: 0 1 auto

flex: 1; equals flex: 1 1 0%;

flex: auto; equals flex: 1 1 auto;

flex: none; equals flex: 0 0 auto;

align-self

Allows individual items to have different alignment from other items, overriding align-items property.

Possible values: auto (default), flex-start, flex-end, center, baseline, stretch

.item {
  flex: 1; /* evenly distribute remaining space */
}

.important-item {
  flex: 2; /* occupy 2x remaining space */
}

.fixed-item {
  flex: 0 0 200px; /* fixed width 200px, no stretching */
}

.special-item {
  align-self: flex-end; /* align individually to bottom */
}

🔥 Common Interview Questions

(1) What does flex: 1 mean? And what are the roles of flex-grow, flex-shrink and flex-basis?

Answer:flex is the shorthand property for flex-grow, flex-shrink and flex-basis.

flex: 1 equals flex: 1 1 0%, containing three properties:
- flex-grow: 1 - Defines item's growth ratio, meaning it will distribute the container's remaining space
- flex-shrink: 1 - Defines item's shrink ratio, meaning it will shrink when space is insufficient
- flex-basis: 0% - Defines item's base size, 0% means completely relies on flex-grow for distribution

The roles of these three properties:

flex-grow: Determines how items distribute remaining space, larger values get more
Example: Two items, one with flex-grow:1, another with flex-grow:2, the latter gets twice the remaining space of the former
flex-shrink: Determines how items shrink, larger values shrink more
Example: When container width is insufficient, items with flex-shrink:2 shrink more than those with flex-shrink:1
flex-basis: Sets the initial size of items
Example: flex-basis:100px means item's initial width is 100px, then adjusted according to flex-grow and flex-shrink

Simply put, flex: 1 allows items to flexibly fill container space, equally distributing all available space.

(2) How to achieve vertical and horizontal centering using Flexbox?

Answer:Using Flexbox to achieve perfect centering of elements is very simple:

.parent {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center; /* vertical center */
}

/* or horizontal center only */
.horizontal-center {
  display: flex;
  justify-content: center;
}

/* or vertical center only */
.vertical-center {
  display: flex;
  align-items: center;
}

This method applies to various situations, including single-line text, multi-line text, images, or complex element centering. Compared to traditional methods (like absolute positioning + negative margin, table layout, etc.), Flexbox centering is more intuitive and flexible.