AssignmentFB002

Fledbox Parent - Flex Direction Column

flex-direction, justify-content, and align-items

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

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 default is row.

Remember this - If flex-direction is column:

• You can use justify-content to justify children elements (up and down).
• You can use align-items to align items (side to side).

Notice the change in purpose for the justify content and align items properties. Their purpose changes based on whether flex direction is row or column.

Again, if the flex-direction is set to column, the function of justify-content and align-items switch roles. In this case, justify-content works vertically and align-items works horizontally.

In order to get credit, create three parent divs (50% x 500px) and three children divs (100px x 100px) within each parent. Change the parent div to display:flex. Also, change the property values 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 column or column-reverse)

.parent002

justify-content:center

now used for vertical placement

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

.parent003

align-items:center

now used for horizontal placement

(Try center, flex-start, or flex-end. Avoid baseline and the default stretch)