AssignmentFB004

Flexbox Children - align-self and order

You can also change properties on Flexbox children elements

You can use the align-self on children elements to overide parent element justify-content and align-items propties

You can use the order property to change the order of children elements. Remember default order is 0 on all elements

Instructions: Build two parent flexbox elements. Include three children in each parent element. The bold properties below are the settings for each parent element. Focus on changing the align-self and order properties of all children elements. Make sure your children elements have different settings than mine.

Rows

flex-direction:row

justify-content:center

align-items:flex-end

#parent001

align-self:flex-start (will be vertical)

(Try flex-start flex-end, or center on item 1)

(Try changing the order numbers on all items)

Columns

flex-direction:column

justify-content:center

align-items:flex-end

#parent002

align-self:center (Will be horizontal)

(Try center, flex-start, or flex-end on Item B)

(Try changing the order numbers on all items)