Flex item sizing

Sets the initial main size of a flex item before free space is distributed according to flex factors.

Part of: HTML and CSS Journey — Module 53

Understanding Flex item sizing in HTML & CSS

What it does: A flex-shrink value of 0 locks the item's minimum baseline size to its flex-basis value. flex-grow: 1 is the standard mechanism to distribute leftover space equally among expanding elements. flex-grow accepts unitless numbers as factors, never length units like px. Higher values mean a larger share of the remaining available space will be allocated. flex-basis applies to the main axis. If flex-direction is column, the main axis is vertical, so it sets the height. Length dimensions in CSS require explicitly defined units to be properly computed by rendering engines. Growth parameters are abstract mathematical scalar proportions rather than exact physical constraints.

Common mistakes: The flex-basis property must be placed inside a CSS rule block, not floating outside. Numerical values for flex-basis require a unit like px, %, or the keyword auto.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Flex item sizing to a class →

This module's key terms are also in a printable crossword (Modules 53–63) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which property sets the default initial size of a flex item before space distribution?

flex-basisflex-grow

Matches

.item { flex-basis: 40; }

↓

Missing unit type (such as px or %) for a numerical flex-basis value.

Applying

Meanings

Term

flex-basis

Meaning

Sets the initial main size of a flex item before free space is distributed according to flex factors.

Practice

.flex-item {

Testing

Gaps

: 250px;

Check Answer

Spots

1flex-basis: 100px;

2.item {

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which property sets the default initial size of a flex item before space distribution?

A. flex-grow

B. flex-basis ✓

flex-basis determines the starting main size of an item, whereas flex-grow handles extra space distribution.

2. What is the correct syntax to prevent a flex item from shrinking when container space is tight?

A. flex-shrink: false;

B. flex-shrink: 0; ✓

A value of 0 means the item will maintain its flex-basis size and not shrink.

3. Which of these is a valid value for the flex-grow property?

A. 2 ✓

B. 200px

flex-grow accepts unitless numbers as factors, never length units like px.

4. If two flex items have flex-grow values of 1 and 2, which one absorbs more leftover space?

A. The item with flex-grow: 2 ✓

B. The item with flex-grow: 1

Higher values mean a larger share of the remaining available space will be allocated.

5. What is the initial default value of the flex-shrink property on flex items?

A. 1 ✓

B. 0

By default, flex items have a flex-shrink value of 1, meaning they will shrink to fit the container if necessary.

Match the Pairs

.item { flex-basis: 300px; } → Specifies a starting main size of 300 pixels for the flex item.

.item { flex-grow: 2; } → Allows the item to grow at twice the rate of items with a factor of 1.

Ensures a flex item maintains its size and never shrinks down. → .item { flex-shrink: 0; }

Sets the item to fill space relative to others dynamically. → .item { flex-grow: 1; }

.item { flex-basis: 40; } → Missing unit type (such as px or %) for a numerical flex-basis value.

.item { flex-grow: 10px; } → Using a pixel unit on a property that requires a unitless proportion factor.

Key Term

flex-basis

Sets the initial main size of a flex item before free space is distributed according to flex factors.

Fill in the Blanks

1. .card { flex-basis: 250px; }

Hint: Type the property that sets the initial main size of a flex item

2. .sidebar { flex-grow: 1; }

Hint: Type the property that defines the ability for a flex item to grow

3. .box { flex-shrink: 0; }

Hint: Type the property that prevents a flex item from shrinking

4. .item { flex-basis: auto; }

Hint: Type the default value for the flex-basis property

5. .panel { flex-grow: 2; }

Hint: Type a positive number value to make this item grow twice as much as others

Spot the Error

Question 1

A flex-basis: 100px;

B .item {

C color: blue;

D }

Line A — The flex-basis property must be placed inside a CSS rule block, not floating outside.

Question 2

A .item {

B flex-basis: 200;

C color: red;

D }

Line B — Numerical values for flex-basis require a unit like px, %, or the keyword auto.

Question 3

A .box {

B display: flex;

C flex-grow: yes;

D }

Line C — The flex-grow property accepts a unitless number factor, not a keyword like 'yes'.

Question 4

A .panel {

B display: block;

C width: 100%;

D flex-shrink: -1;

E }

Line D — The flex-shrink property accepts only non-negative numbers; negative values are invalid.

Question 5

A flex-size: 300px;

B .sidebar {

C display: flex;

D }

Line A — There is no 'flex-size' property. Use 'flex-basis' to set the initial size of an item.

Student with a class code? Join your class →