AssignmentFB001
Flexbox Parent - Flex Direction Row
We have two options for layout design, Grid and Flexbox. We can use either techonology for layout design, each has its pros and cons. I rocommend Grid for complex designs and Flexbox for simple designs(also components like menus and buttons). You can also use them both on the same layout.
flex-direction, justify-content, align-items
Flexbox requires a parent container and children elements. The following elements are all divs. The light blue elements are the parnt elements(containers). The coral elements are children(elements within the parent).
The parent container must be given the rule display:flex
Remember this - If flex-direction is row:
-
You Can Use justify-content to justify children elements horizontally
-
You can use align-items to align children elements vertically
In order to get credit, create three parent divs(50% x 500px) and three children divs 100px x 100px within each parent. Set the parent div to display:flex. Also, change the property values below to any of the suggested property values. Please label your work and let me know which property values you applied.
Rows
.parent001
flex-direction:row
(Try row or row-reverse)
.parent002
justify-content:space-around
(Try space-around, center, flex-start, flex-end, space-evenly, or space-between)
.parent003
align-items:flex-end
(Try flex-end, center, or flex-start. Avoid Baseline)