The Flexible Box Layout can be difficult to get the hang of at first. So for this assignment, you will get to practice using flex properties and seeing the resulting behaviors.
The activity links below each contain a zip file full of images. Each set of image files are pieces that belong to a large picture. You will download at least one of these zip files and place them in an image folder in this project's directory. Add these image pieces as flex items inside a flex container. You need to use a combination of CSS properties to assemble the puzzle inside the flex container.
| Butterflies (16 pieces) | |
| Snowmen (12 pieces) | |
| Fish (9 pieces) |
But watch out—each puzzle set contains one piece that doesn't fit. This image should still be included in your flex container, but use the display property to keep it from showing up when viewed in a browser.
Your completed assignment should contain all of the following:
 |
|
When you're done, save your HTML file and upload it to your Neocities account. Then submit the assignment link to your teacher. You will be graded using the following rubric:
Flex Properties |
3 points | Proper CSS properties were used, with flex container properties as part of the solution. |
Display |
1 point | The trick puzzle piece is included, but hidden from view in the browser. |
Solution |
1 point | The puzzle is solved correctly. |
Organization |
1 point | Images are kept in their own directory. |
