FLEXBOX FROGGY, 플렉스 개구리 솔루션(1) 1~12

 

🐸 Flexbox Froggy란 ?

CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임
Flexbox의 속성을 실습하며 익히기 좋다.

 

* FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

1단계. 개구리를 오른쪽으로 이동

#pond {
    display: flex;
    justify-content: flex-end;
}

 

2단계. 개구리를 가로선 상 중앙 정렬

#pond {
    display: flex;
    justify-content: center;
}

 

3단계. 수련잎 주위의 간격 고려하여 이동

#pond {
    display: flex;
    justify-content: space-around;
}

 

4단계. 수련잎 사이 동일 간격 고려하여 이동

#pond {
    display: flex;
    justify-content: space-between;
}

 

5단계. 개구리를 아래로 이동

#pond {
    display: flex;
    align-items: flex-end;
}

 

6단계. 개구리를 정중앙으로 이동

#pond {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

7단계. 개구리를 아래로 이동 + 수련잎 주위의 간격 고려

#pond {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

 

8단계. 개구리 순서를 반대로 + 오른쪽으로 이동

#pond {
    display: flex;
    flex-direction: row-reverse;
}

 

9단계. 개구리 세로 정렬

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

 

10단계. 개구리 순서를 반대로

#pond {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

 

11단계. 개구리를 아래로 이동 + 세로 정렬

#pond {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

 

12단계. 개구리 세로 정렬 + 순서를 반대로 + 수련잎 사이 동일 간격

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