Flex container in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a flex container.

CSS

.container {
  display: [1];
}

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

Aflex

Bblock

Cgrid

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using block or inline instead of flex.

Confusing grid with flexbox.

To create a flex container, the display property must be set to flex.

2fill in blank

medium

Complete the code to align items vertically in the center inside the flex container.

CSS

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

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

Aflex-end

Bflex-start

Ccenter

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-start or flex-end which align items to top or bottom.

Using stretch which stretches items to fill container height.

The align-items: center; property centers items vertically inside a flex container.

3fill in blank

hard

Fix the error in the code to make the flex container wrap its items to the next line.

CSS

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

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

Awrap

Bnowrap

Cwrap-reverse

Dno-wrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using nowrap which prevents wrapping.

Using invalid value no-wrap which is not recognized.

The correct value to allow flex items to wrap is wrap. nowrap disables wrapping.

4fill in blank

hard

Fill both blanks to create a flex container that centers items horizontally and vertically.

CSS

.container {
  display: [1];
  justify-content: [2];
  align-items: center;
}

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

Aflex

Bblock

Ccenter

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using block or inline for display which disables flexbox.

Using wrong values for justify-content like flex.

Set display: flex; to create a flex container. Use justify-content: center; to center items horizontally.

5fill in blank

hard

Fill all three blanks to create a flex container that wraps items and stretches them vertically.

CSS

.container {
  display: [1];
  flex-wrap: [2];
  align-items: [3];
}

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

Ablock

Bwrap

Cstretch

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using block instead of flex for display.

Using nowrap instead of wrap for flex-wrap.

Using center instead of stretch for align-items.

Use display: flex; to create a flex container. flex-wrap: wrap; allows items to wrap. align-items: stretch; makes items stretch vertically.