Solutions Flexbox Defense

Flexbox Defense answers

1. 
justify-content: center;

2. 
justify-content: flex-end; 
justify-content: center; 
justify-content: flex-end; 

3. 
justify-content: center; 
justify-content: space-between;

4. 
align-items: flex-end; 
justify-content: center;

5. 
justify-content: space-around;
align-items: flex-end;
justify-content: center;
justify-content: center;

6. 
justify-content: space-between; 
align-items: center;

7. 
flex-direction: column;
flex-direction: column;

8. 
flex-direction: column;
align-items: center;
flex-direction: column; 

9. 
justify-content: space-around; 
flex-direction: row-reverse;
flex-direction: row-reverse; 
align-items: center; 
justify-content: space-around;

10. 
justify-content: space-around;
order: 1;
justify-content: space-around;
order: -1;

11. 
justify-content: space-between;
align-self: flex-end;
align-self: flex-end;

12. 
justify-content: space-between; 
align-items: center;
order: 1; 
align-self: center;
align-self: center;
align-self: flex-end;
order: 1;

#4 does not work.

#4 does not work.

Just remove the "justify-content" instruction :-)

Thank you good sir!!

#12 doesn't work

#12(lwave 12l)

.tower-group-1 {
display: flex;
justify-content: space-between;
}
.tower-1-1 {
order: -1;
}
.tower-1-2 {
align-self: center;
}
.tower-1-3 {
order: 1;
align-self: center;
}
.tower-1-4 {
align-self: center;
}
.tower-1-5 {
order: 1;
align-self: flex-end;
}

Wave 5

.tower-group-1 {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.tower-group-2 {
display: flex;
justify-content: center;
}
.tower-group-3 {
display: flex;
justify-content: center;
align-items: center;
}

Wave 11

.tower-group-1 {
display: flex;
justify-content: space-between;
}
.tower-1-1 {
}
.tower-1-2 {
}
.tower-1-3 {
align-self: flex-end;
}
.tower-1-4 {
}

#10 Did not work.

#9
.tower-group-1 {
display: flex;
justify-content: space-around; ;
flex-direction: row-reverse;
flex-direction: row-reverse; ;
align-items: center; ;
justify-content: space-around;
}
.tower-group-2 {
display: flex;
flex-direction: column;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
}

click this link for the full codes for flex box froggy! https://gist.github.com/Baconalwaysbetterthanyou/d64e001541eec4503cc9d94e61a77b61

#10 Did not work.
click this link for the full codes for flex box froggy!
https://gist.github.com/Baconalwaysbetterthanyou/d64e001541eec4503cc9d94e61a77b61