Assignment FB002

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). Tyhe coral elements below are children (elements within the parent).

The parent container must be given the rule displat:flex in order to enable flexbox. You can specify the flex-diretion, 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 ti align items horizontally (side to side)

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

Again, of 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

Columns

.parent001

flex-direction;column

(Try column or coluumn-reverse)

.parent002

justify-content;center

*now used for vertical placment

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