Flexbox utility class generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a flex container class.

SASS

.flex-container { display: [1]; }

Drag options to blanks, or click blank then click option'

Ablock

Binline

Cflex

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' for display property.

Using 'grid' which is a different layout system.

The display: flex; property makes the element a flex container.

2fill in blank

medium

Complete the code to set the flex direction to row.

SASS

.flex-row { flex-direction: [1]; }

Drag options to blanks, or click blank then click option'

Acolumn

Brow

Cwrap

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'column' which arranges items vertically.

Using 'wrap' which is not a direction.

The flex-direction: row; arranges flex items horizontally.

3fill in blank

hard

Fix the error in the code to center flex items horizontally.

SASS

.center-items { justify-content: [1]; }

Drag options to blanks, or click blank then click option'

Astart

Bspace-between

Cflex-start

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' which aligns items to the start, not center.

Using 'flex-start' which aligns items to the start, not center.

justify-content: center; centers flex items horizontally inside the container.

4fill in blank

hard

Fill both blanks to create a flex container that wraps items and aligns them to the end vertically.

SASS

.flex-wrap-end { flex-wrap: [1]; align-items: [2]; }

Drag options to blanks, or click blank then click option'

Awrap

Bnowrap

Cflex-end

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nowrap' which prevents wrapping.

Using 'center' which aligns items in the middle vertically.

flex-wrap: wrap; allows items to wrap to the next line.
align-items: flex-end; aligns items to the bottom of the container vertically.

5fill in blank

hard

Fill all three blanks to create a flex utility class that sets direction to column, centers items horizontally, and justifies content with space between.

SASS

.flex-column-space { flex-direction: [1]; align-items: [2]; justify-content: [3]; }

Drag options to blanks, or click blank then click option'

Arow

Bcenter

Cspace-between

Dcolumn

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'row' and 'column' for direction.

Using 'flex-start' instead of 'center' for alignment.

Using 'space-around' instead of 'space-between' for justification.

flex-direction: column; stacks items vertically.
align-items: center; centers items horizontally.
justify-content: space-between; distributes items evenly with space between them vertically.