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
Sixthin 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
flex-directionsettings from your Flexbox arsenal.
- Colors: page background should be
lightblue, the boxes have an
- At or above the
900pxscreen 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
Fifth Third First
Sixth Fourth Second
Solve your exercise here: