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.

Practice

1. What does setting display: flex; on a container do?

easy

A. It hides the container and its children.

B. It makes the container's text bold.

C. It changes the container's background color.

D. It makes the container a flex container, arranging children in a row or column.

Solution

1. Step 1: Understand the role of display: flex;

   Setting display: flex; on a container activates flexbox layout for its children.

2. Step 2: Effect on child elements

   Children inside a flex container are arranged in a row by default or column if specified.

3. Final Answer:

   It makes the container a flex container, arranging children in a row or column. -> Option D

4. Quick Check:

   Flex container = display: flex [OK]

Hint: Remember: display: flex creates a flexible box container [OK]

Common Mistakes:

• Confusing flex container with hiding elements
• Thinking it changes colors or text styles
• Assuming it only affects text formatting

2. Which of the following is the correct CSS syntax to make a container a flex container?

easy

A. container { display: flex; }

B. container { display: block-flex; }

C. container { flex: display; }

D. container { flex-display: true; }

Solution

1. Step 1: Identify correct CSS property and value

   The correct property to enable flexbox is display with the value flex.

2. Step 2: Check syntax correctness

   container { display: flex; } uses correct CSS syntax: display: flex;. Others are invalid CSS.

3. Final Answer:

   container { display: flex; } -> Option A

4. Quick Check:

   Correct syntax = display: flex [OK]

Hint: Use 'display: flex;' exactly to start flexbox [OK]

Common Mistakes:

• Swapping property and value order
• Using non-existent properties like flex-display
• Adding extra words like 'true' or 'block-flex'

3. Given this CSS and HTML, what will be the layout of the boxes inside the container?

 .container { display: flex; } 
 .box { width: 50px; height: 50px; background: red; margin: 5px; } 

<div class='container'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>

medium

A. Boxes arranged horizontally in a row with space between them.

B. Boxes stacked vertically in a column.

C. Boxes overlapping each other in the same spot.

D. Boxes hidden because of missing display property.

Solution

1. Step 1: Analyze the container's display property

   The container has display: flex;, which arranges children in a row by default.

2. Step 2: Understand the boxes' layout

   Each box has fixed size and margin, so they appear side by side with space around them.

3. Final Answer:

   Boxes arranged horizontally in a row with space between them. -> Option A

4. Quick Check:

   Flex default direction = row [OK]

Hint: Flex default direction is row, so children line up horizontally [OK]

Common Mistakes:

• Assuming flex defaults to column
• Thinking boxes overlap without positioning
• Ignoring margin spacing between boxes

4. What is wrong with this CSS if the flex container does not arrange items in a row?

.container {
  display: flex;
  flex-direction: column;
}

medium

A. Flex container needs 'flex-wrap: wrap;' to arrange items.

B. Missing semicolon after display: flex;

C. The value 'column' is wrong; it should be 'row'.

D. Flexbox requires 'display: flexbox;' not 'display: flex;'.

Solution

1. Step 1: Check the flex-direction property value

   The value 'column' arranges children vertically instead of horizontally.

2. Step 2: Correct the value to 'row'

   Changing 'column' to 'row' fixes the layout to arrange items horizontally.

3. Final Answer:

   The value 'column' is wrong; it should be 'row'. -> Option C

4. Quick Check:

   flex-direction: row for horizontal [OK]

Hint: Use 'flex-direction: row' for horizontal layout [OK]

Common Mistakes:

• Using 'column' instead of 'row' for horizontal layout
• Confusing flex and flexbox in display
• Assuming flex-wrap controls direction

5. You want a flex container to stack its child items vertically and center them horizontally. Which CSS achieves this?

hard

A. .container { display: flex; flex-direction: row; justify-content: center; }

B. .container { display: flex; flex-direction: column; align-items: center; }

C. .container { display: flex; flex-wrap: wrap; align-content: center; }

D. .container { display: block; text-align: center; }

Solution

1. Step 1: Set flex-direction to column for vertical stacking

   Using flex-direction: column; stacks children vertically.

2. Step 2: Use align-items: center to center horizontally

   align-items: center; centers items along the cross axis (horizontal in column direction).

3. Final Answer:

   .container { display: flex; flex-direction: column; align-items: center; } -> Option B

4. Quick Check:

   Column + align-items center = vertical stack + horizontal center [OK]

Hint: Use flex-direction column + align-items center for vertical center [OK]

Common Mistakes:

• Using row direction when vertical stack needed
• Confusing justify-content with align-items for cross axis
• Using display block instead of flex