Salangdung_i의 기록

Flexbox Froggy CSS 코드게임 13-24 문제풀이 본문

WEB FRONT END/HTML5+CSS

Flexbox Froggy CSS 코드게임 13-24 문제풀이

Salangdung_i 2021. 11. 14. 20:38
728x90

13 단계

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

14 단계

#pond { display: flex; } .yellow { order: 1; }

15 단계

#pond { display: flex; } .red { order: -1; }

16 단계

#pond { display: flex; align-items: flex-start; } .yellow { align-self:flex-end; }

17 단계

#pond { display: flex; align-items: flex-start; } .yellow { order: 1; align-self:end }

18 단계

#pond { display: flex; flex-wrap:wrap; }

19 단계

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

20 단계

#pond { display: flex; flex-flow: column wrap; }

21 단계

#pond { display: flex; flex-wrap: wrap; align-content:flex-start }

22 단계

#pond { display: flex; flex-wrap: wrap; align-content:end }

23 단계

#pond { display: flex; flex-wrap: wrap; flex-direction:column-reverse; align-content:center }

24 단계

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



https://salangdung.tistory.com/159

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:..

salangdung.tistory.com

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

https://salangdung.tistory.com/158

728x90

'WEB FRONT END > HTML5+CSS' 카테고리의 다른 글

CSS : 레이아웃 정리 (display/box-sizing/em/rem)  (0) 2022.03.22
justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex  (0) 2021.11.14
Flexbox Froggy CSS 코드게임 1-12 문제풀이  (0) 2021.11.14
CSS 레이아웃 block, inline, display, position  (0) 2021.11.14
CSS variables  (0) 2021.11.12
'WEB FRONT END/HTML5+CSS' Related Articles more