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 properties

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)

Item1 - order 2
Item2 - order 1
Item3 - order 3

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)

ItemA - order 3
ItemB - order -1
ItemC- order 0