Flexbox Defense

LEVEL1

.tower-group-1{
	display: flex;
	justify-context: center;
}

 

 

 

 

LEVEL2

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

 

 

 

 

LEVEL3

.tower-group-1{
	display:flex;
	justify-content: center;
}
.tower-group-2{
	display:flex;
	justify-content: space-between;
}

 

 

 

 

LEVEL4

.tower-group-1{
	display:flex;
	align-items: flex-end;
}
.tower-group-2{
	display:flex;
	align-items: flex-end;
}

 

 

 

 

LEVEL5

.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: space-around;
	align-items: center;
}

 

 

 

 

LEVEL6

.tower-group-1{
	display:flex;
	align-items: center;
	justify-content: space-between;
}

 

 

 

 

LEVEL7

.tower-group-1{
	display: flex;
	flex-direction: column;
}
.tower-group-2{
	display: flex;
	flex-direction: column;
}

 

 

 

 

LEVEL8

.tower-group-1{
	display: flex;
	flex-dirction: column;
}
.tower-group-2{
	display: flex;
	flex-direction: column;
	align-items: center;
}

 

 

 

 

LEVEL9

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

 

 

 

 

LEVEL10

.tower-group-1{
	display:flex;
	justify-content: space-around;
}
.tower-1-2{
	order: 2;
}
.tower-group-2{
	display: flex;
	justify-content: space-around;
}
.tower-2-1{
	order: 1;
}

 

 

 

 

LEVEL11

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

 

 

 

 

LEVEL12

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