[Web/CSS] CSS- FlexBox Froggy 풀어보기

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

✏️ 1번

 

✏️ 2번

 

✏️ 3번

 

✏️ 4번

 

✏️ 5번

 

✏️ 6번

 

✏️ 7번

 

✏️ 8번

 

✏️ 9번

 

✏️ 10번

 

✏️ 11번

 

✏️ 12번

 

✏️ 13번

 

✏️ 14번

 

✏️ 15번

 

✏️ 16번

 

✏️ 17번

 

✏️ 18번

 

✏️ 19번

 

✏️ 20번

 

✏️ 21번

 

✏️ 22번

 

✏️ 23번

 

✏️ 24번

 

 

✏️ 정답 모음

<style>
1번
justify-content: flex-end;
2번
justify-content: center;
3번
justify-content: space-around;
4번
justify-content: space-between;
5번
align-items: flex-end;
6번
justify-content:center;
align-items:center;
7번
justify-content: space-around;
align-items: flex-end;
8번
flex-direction: row-reverse;
9번
flex-direction: column;
10번
flex-direction:row-reverse;
justify-content:flex-end;
11번
flex-direction: column;
justify-content: flex-end;
12번
flex-direction : column-reverse;
justify-content: space-between;
13번
flex-direction: row-reverse;
justify-content:center;
align-items: flex-end;
14번
order:1;
15번
order:-3;
16번
align-self: flex-end;
17번
order:2;
align-self:flex-end;
18번
flex-wrap: wrap;
19번
flex-direction: column;
flex-wrap:wrap;
20번
flex-flow: column wrap;
21번
align-content: flex-start;
22번
align-content: flex-end;
23번
flex-direction: column-reverse;
align-content: center;
24번
flex-direction: column-reverse;
flex-wrap:wrap-reverse;
justify-content:center;
align-content:space-between;
</style>

 

 

재밌으니까 다들 한 번씩 풀어보세요~