Stack items in a column — practice exercise

What you'll be asked to do

1. 1.Stack items in a columnexercise · easy · 10 min

   Set the flex direction to column.

   Passes when: Set the flex direction to column.

2. 2.Reverse the rowexercise · easy · 10 min · practice plan

   Set the direction to row-reverse.

   Passes when: Set the direction to row-reverse.

3. 3.Reverse the columnexercise · easy · 10 min · practice plan

   Set the direction to column-reverse.

   Passes when: Set the direction to column-reverse.

4. 4.Use the flex-flow shorthandexercise · easy · 10 min · practice plan

   Set direction and wrap together with flex-flow.

   Passes when: Set direction and wrap together with flex-flow.

5. 5.Column with a gapexercise · medium · 10 min · practice plan

   Stack in a column with a 14px gap.

   Passes when: Stack in a column with a 14px gap.

6. 6.Fix the misspelled valuebug fix · easy · 8 min

   The value is column, not colum.

   Passes when: The value is column, not colum.

7. 7.Fix the wrong propertybug fix · easy · 8 min · practice plan

   The property is flex-direction, not direction.

   Passes when: The property is flex-direction, not direction.

8. 8.Fix the reverse spelled wrongbug fix · easy · 8 min · practice plan

   The value is row-reverse.

   Passes when: The value is row-reverse.

9. 9.Fix the direction set on the itemsbug fix · easy · 8 min · practice plan

   flex-direction belongs on the container.

   Passes when: flex-direction belongs on the container.

10. 10.Fix the missing flex containerbug fix · easy · 8 min · practice plan

    flex-direction has no effect without display: flex.

    Passes when: flex-direction has no effect without display: flex.

Between them these tasks cover row and column, Reversed directions and Main axis.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.