Flexbox Froggy CSS 코드게임 1-12 문제풀이

1 단계

#pond { display: flex; justify-content: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:end; }

6 단계

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

7 단계

#pond { display: flex; justify-content:space-around; align-items: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:left; }

11 단계

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

12 단계

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

https://flexboxfroggy.com/#ko

Flexbox Froggy

더 알아보기 : https://salangdung.tistory.com/158