AssignmentFB002

Flexbox Parent - FLex Direction Column

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

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).

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 vertically (up and down).
You can use align-items to align items horizontally (side to side).

Notice the chanfe in purpose for the justidy cntent and align items properties. Their purpose changes base on whether flex direction is row or column

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

In order to get credit, creat three 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)

Item 1

Item 2

Item 3

.parent002

justify-content:center

*now used for vertical placement

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

Item 4

Item 5

Item 6

.parent003

align-items:center

*now used for horizontal placement

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

Item 7

Item 8

Item 9