Web/css
FLEXBOX FROGGY, 플렉스 개구리 솔루션(1) 1~12
csmoon
2021. 8. 16. 21:24
🐸 Flexbox Froggy란 ?
CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임
Flexbox의 속성을 실습하며 익히기 좋다.
* FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
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;
}