Flex-direction Exercise

Flex-direction exercise

Let’s put theory into practice by creating a Flexbox layout using flex-direction.

Complete the following exercise:

• Create a Flexbox responsive layout.
• The minimum width of the page should be 400 pixels.
• Below the 600 pixels width, display six boxes below each other. Each box should contain the words First, Second, Third, Fourth, Fifth, Sixth in this order from top to bottom.
• Below the 600 pixels screen width, each box is 400 pixels wide and is centered horizontally
• The top and bottom margin around the boxes is 40px.
• The height of each box is 200px.
• At or above 600px width, each box is 250px wide and there is a 25px margin around the boxes.
• Despite adding a 1px black border, two boxes should fit next to each other even at 600px page width.
• The boxes are aligned to the left
• You are only allowed to use display: flex; and flex-direction settings from your Flexbox arsenal.
• Colors: page background should be lightblue, the boxes have an orange background.
• At or above the 900px screen width, display the six boxes in two rows. The first row should contain the odd items (first, third, fifth), and the second row should contain the even items.

Think about how you can display the items in both of the following order:

First  Third  Fifth 
Second Fourth Sixth

and

Fifth Third  First
Sixth Fourth Second

Solve your exercise here: