FLEXBOX FROGGY GAME

Level 1

justify-content: flex-end;

Level 2

justify-content:center;

Level 3

justify-content:space-around;

Level 4

it needs space in between, the padding on left-right not needed like Level 3

justify-content:space-between;

Level 5

align-item:flex-end;

Level 6

align-item:flex-center;
justify-content:flex-center;

Level 7

align-item:flex-end;

Level 8

justify-content:row-reverse;

Level 9

flex-direction:column;

Level 10

flex-direction:row-reverse;
justify-content:flex-end;

by using row reverse the axis direction has also been changed(shifted), so we did justify-content:flex-end; for moving frogs to start

Level 11

flex-direction:column;
justify-content:flex-end;

Level 12

flex-direction:column-reverse;
justify-content:space-between;

Level 13

align-items:flex-end;
justify-content:center;
flex-direction:row-reverse;

Level 14

write property only for 1 or 2, use order property to an individual item, order:0 is the default, highest order will go at the end and lowest will go first, if 2 divs have same order then first come first serve,

yellow{
order:4;
}

Level 15

order:0 will not work because all the items have zero order

red{
    order:-1;
}

Level 16

stretch, center, start, end, top to bottom

yellow{
    align-self:flex-end;
}

Level 17

yellow{
    align-self:flex-end;
    order:1;
}

Level 18

flex-, if we don't wrap the elements are squeezing not getting stacked, working on container, not on each item

#pond{
    display:flex;
    flex-wrap:wrap;
}

Level 19

#pond{
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
}

Level 20

#pond{
    display:flex;
    flex-flow:column-wrap;
}

Level 21

align-content: start, center,space-between, space-around, applied to an individual item on secondary axis(top to bottom)

#pond{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;

}

Level 22

#pond{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-end;
}

Level 23

#pond{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column-reverse;
    align-content:center;
}

Level 24

when we change direction, the axis also switched

#pond{
    display:flex;
    flex-direction:column-reverse;
    flex-wrap:wrap-reverse;
    justify-content:center;
    align-content:space-between;
}