AssignmentFB002

Flexbox Parent - Flex Direction Column

Flexbox requires a parent container and children elements. The slategray elements below are the parent elements(containers). The coral elements below are children (elements within the parent.)

flex-direction, justify-content, align-items

The parent container must be given the rule display:flex in order to enable flexbox. You can then specify the flex-direction, row or column. If you leave out the flex-direction, the deafault is row

Remember this - If flex-direction is column:

You Can Use justify-content to justify children elements vertically
You can use align-items to align children elements horizontally

In order to get credit, create three parent divs(50%px x 500px) and three children divs 100px x 100px within each parent. Change 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.

Columns

.parent001

flex-direction:column

(Try row or column-reverse)

Item1

Item2

Item3

.parent002

justify-content:space-around

(Try space-around, center, flex-start, flex-end, space-evenly, or space-between)

Item1

Item2

Item3

.parent003

align-items:flex-end

(Try flex-end, center, or flex-start. Avoid Baseline)

Item1

Item2

Item3