Puzzle Assignment
Name: Mahirr Rubbinunan
Puzzle Chosen: Butterflies
Assembled Puzzle
Flex Container Properties Used
The puzzle was assembled using the following CSS Flexbox properties:
- display: flex; - Establishes the puzzle container as a flex container, enabling Flexbox layout for the puzzle pieces.
- flex-wrap: wrap; - Allows puzzle pieces to wrap to the next row, creating a 4x4 grid layout for the 600x600px container.
- width: 150px; height: 150px; - Sets each puzzle piece to a fixed size to ensure uniformity and proper alignment in the 4x4 grid.
- flex: 0 0 auto; - Applied to puzzle pieces to prevent stretching or shrinking, maintaining their exact 150x150px dimensions.
- display: none; - Applied to the faulty puzzle piece to hide it from the rendered view, ensuring only the 16 correct pieces are visible.
The puzzle pieces are stored in an "images" folder within the project directory. The 16 pieces are arranged in the correct order to form the complete butterfly image in a 4x4 grid, with each piece being 150x150px. The faulty piece is included in the HTML but hidden using the display: none; property.