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 - Order3
Item2 - Order1
Item3 - Order2

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)

Item1 - Order3
Item2 - Order1
Item3 - Order2