Allow wrapping — practice exercise

What you'll be asked to do

1. 1.Allow wrappingexercise · easy · 10 min

   Let flex items wrap onto new lines.

   Passes when: Let flex items wrap onto new lines.

2. 2.Align wrapped lines to the startexercise · easy · 10 min · practice plan

   Wrap the items and pull the lines to the start.

   Passes when: Wrap the items and pull the lines to the start.

3. 3.Wrap in reverseexercise · easy · 10 min · practice plan

   Use wrap-reverse.

   Passes when: Use wrap-reverse.

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

   Set direction and wrap in one declaration.

   Passes when: Set direction and wrap in one declaration.

5. 5.Align wrapped linesexercise · medium · 10 min · practice plan

   Wrap and centre the resulting lines.

   Passes when: Wrap and centre the resulting lines.

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

   The property is flex-wrap, not flexwrap.

   Passes when: The property is flex-wrap, not flexwrap.

7. 7.Fix the invalid valuebug fix · easy · 8 min · practice plan

   "wrapped" is not valid, so no wrapping happens at all.

   Passes when: "wrapped" is not valid, so no wrapping happens at all.

8. 8.Fix the incomplete shorthandbug fix · easy · 8 min · practice plan

   flex-flow only sets the direction, so the items never wrap.

   Passes when: flex-flow only sets the direction, so the items never wrap.

9. 9.Fix align-items used for wrapped linesbug fix · easy · 8 min · practice plan

   Spacing between wrapped lines uses align-content.

   Passes when: Spacing between wrapped lines uses align-content.

10. 10.Fix the wrap set on the itemsbug fix · easy · 8 min · practice plan

    flex-wrap belongs on the container.

    Passes when: flex-wrap belongs on the container.

Between them these tasks cover wrap and nowrap, wrap-reverse and align-content.

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