Flex direction in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the flex direction to row.

CSS

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

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

Acolumn

Binline

Cwrap

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'column' which arranges items vertically.

Using 'wrap' which is not a valid flex-direction value.

The flex-direction property controls the direction of flex items. row arranges items horizontally from left to right.

2fill in blank

medium

Complete the code to set the flex direction to column.

CSS

nav {
  display: flex;
  flex-direction: [1];
}

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

Acolumn

Brow-reverse

Crow

Dwrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'row' which arranges items horizontally.

Using 'wrap' which is unrelated to flex-direction.

The column value stacks flex items vertically from top to bottom.

3fill in blank

hard

Fix the error in the flex-direction property to reverse the row direction.

CSS

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

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

Acolumn

Brow-reverse

Creverse-row

Dcolumn-reverse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reverse-row' which is not a valid CSS value.

Confusing 'column-reverse' with reversing rows.

The correct value to reverse the horizontal order is row-reverse. reverse-row is invalid.

4fill in blank

hard

Fill both blanks to set flex direction to column-reverse and add display flex.

CSS

section {
  display: [1];
  flex-direction: [2];
}

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

Aflex

Bblock

Ccolumn-reverse

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Setting display to 'block' which disables flexbox.

Using 'inline' which is not a flex container.

To use flexbox, display must be flex. To reverse vertical stacking, use column-reverse.

5fill in blank

hard

Fill all three blanks to create a flex container with row-reverse direction and center alignment.

CSS

.header {
  display: [1];
  flex-direction: [2];
  justify-content: [3];
}

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

Ablock

Bflex

Crow-reverse

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' disables flexbox.

Using 'row' instead of 'row-reverse' does not reverse order.

Forgetting to center items with justify-content.

Set display to flex to enable flexbox. Use row-reverse to reverse horizontal order. justify-content: center centers items horizontally.