Box Alignment Lab
Easy
10
84.6% Acceptance
In this lab, we will create a simple layout using flexbox. First, you will create a container div with the class 'container' that will hold our boxes. Inside the container, you will create four boxes with the class 'box', each containing a number (1, 2, 3, 4).
You will then apply 25px of padding to the container using the CSS padding
property. After that, give each box a dimension of 50px by 50px and a solid border of 3px using the width
, height
, and border
properties.
Lastly, you will use the Flexbox properties display: flex
and justify-content: space-evenly
to align the boxes evenly inside the container. Additionally, you will make the boxes wrap to a new line if the screen width goes below 200px.