Flex wrap in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to allow flex items to wrap onto multiple lines.

CSS

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

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

Anowrap

Bblock

Cinline

Dwrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nowrap' which prevents wrapping.

Using 'inline' or 'block' which are not valid values for flex-wrap.

The flex-wrap property controls whether flex items wrap onto multiple lines. The value wrap allows wrapping.

2fill in blank

medium

Complete the code to prevent flex items from wrapping.

CSS

.menu {
  display: flex;
  flex-wrap: [1];
}

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

Awrap-reverse

Bwrap

Cnowrap

Dinherit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'wrap' which allows wrapping.

Using 'wrap-reverse' which wraps in reverse order.

The value nowrap prevents flex items from wrapping and keeps them in a single line.

3fill in blank

hard

Fix the error in the flex container to wrap items in reverse order.

CSS

.gallery {
  display: flex;
  flex-wrap: [1];
}

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

Awrap

Bwrap-reverse

Cnowrap

Dreverse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reverse' which is not a valid value.

Using 'wrap' which wraps normally, not reversed.

The value wrap-reverse wraps flex items onto multiple lines in reverse order.

4fill in blank

hard

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

CSS

.flexbox {
  display: [1];
  flex-wrap: [2];
  justify-content: flex-start;
}

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

Aflex

Bblock

Cwrap

Dnowrap

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'nowrap' which prevents wrapping.

Use display: flex; to create a flex container and flex-wrap: wrap; to allow wrapping.

5fill in blank

hard

Fill all three blanks to create a flex container that wraps items in reverse and centers them horizontally.

CSS

.container {
  display: [1];
  flex-wrap: [2];
  justify-content: [3];
}

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

Ablock

Bflex

Cwrap-reverse

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'wrap' instead of 'wrap-reverse' for reversed wrapping.

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

Use display: flex; to create a flex container, flex-wrap: wrap-reverse; to wrap items in reverse order, and justify-content: center; to center items horizontally.