Flex item sizing

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A flex-grow

B flex-basis

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;

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

A 2

B 200px

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

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

A 1

B 0

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1.item { flex-basis: 300px; }		AAllows the item to grow at twice the rate of items with a factor of 1.
2.item { flex-grow: 2; }		BSpecifies a starting main size of 300 pixels for the flex item.
3Ensures a flex item maintains its size and never shrinks down.		C.item { flex-grow: 1; }
4Sets the item to fill space relative to others dynamically.		DUsing a pixel unit on a property that requires a unitless proportion factor.
5.item { flex-basis: 40; }		EMissing unit type (such as px or %) for a numerical flex-basis value.
6.item { flex-grow: 10px; }		F.item { flex-shrink: 0; }

Definitions

flex-basis

Fill in the Blanks

Complete each line of code by filling in the missing parts.

.card { __________: 250px; }

.sidebar { _________: 1; }

.box { ___________: 0; }

.item { flex-basis: ____; }

.panel { flex-grow: _; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A flex-basis: 100px;

B .item {

C color: blue;

D }

Question 2

A .item {

B flex-basis: 200;

C color: red;

D }

Question 3

A .box {

B display: flex;

C flex-grow: yes;

D }

Question 4

A .panel {

B display: block;

C width: 100%;

D flex-shrink: -1;

E }

Question 5

A flex-size: 300px;

B .sidebar {

C display: flex;

D }

Answer Key

Flex item sizing

Section A: Quick Questions

B — flex-basis

B — flex-shrink: 0;

A — 2

A — The item with flex-grow: 2

A — 1

Section B: 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.

Section C: Definitions

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

Section D: Fill in the Blanks

.card {
  flex-basis: 250px;
}

.sidebar {
  flex-grow: 1;
}

.box {
  flex-shrink: 0;
}

.item {
  flex-basis: auto;
}

.panel {
  flex-grow: 2;
}

Section E: Spot the Error

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

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

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

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

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