# Flexbox Froggy

> Clean Markdown view of GeekNews topic #11124. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=11124](https://news.hada.io/topic?id=11124)
- GeekNews Markdown: [https://news.hada.io/topic/11124.md](https://news.hada.io/topic/11124.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-10-01T10:10:57+09:00
- Updated: 2023-10-01T10:10:57+09:00
- Original source: [flexboxfroggy.com](https://flexboxfroggy.com/)
- Points: 2
- Comments: 1

## Topic Body

- 'Flexbox Froggy'라는 CSS 코드 학습을 돕는 게임 소개 기사
- 'justify-content' 속성을 사용하여 개구리를 연꽃잎으로 안내하는 게임
- 'justify-content' 속성은 컨테이너 내의 아이템을 가로로 정렬
- 속성은 'flex-start'(아이템을 왼쪽으로 정렬), 'flex-end'(아이템을 오른쪽으로 정렬), 'center'(아이템을 중앙으로 정렬), 'space-between'(아이템 사이에 동일한 간격), 'space-around'(아이템 주위에 동일한 간격) 등 여러 값 허용
- 'justify-content: flex-end;'가 개구리를 오른쪽으로 이동시키는 예시 제공
- Codepip이 만든 'Flexbox Froggy' 게임, GitHub 및 Twitter 링크 제공
- CSS 그리드를 배우고 싶은 사람들에게 'Grid Garden'을 추천하는 기사

## Comments



### Comment 19580

- Author: neo
- Created: 2023-10-01T10:10:58+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=37713530) 
- 'Flexbox Froggy'에 대한 기사, CSS 학습 게임
- 사용자들이 추천하는 CSS 학습을 위한 비슷한 게임들, [cssgridgarden.com](https://cssgridgarden.com/), [cssbattle.dev](https://cssbattle.dev/), [flukeout.github.io](https://flukeout.github.io/), 그리고 [css-animations.io](https://css-animations.io/)
- align-content와 align-items 같은 flex 속성을 기억하는데 어려움을 표현하는 사용자들, USB 케이블을 잘못 꽂는 일반적인 문제와 비교
- CSS 그리드와 그것이 제공하는 레이아웃 옵션을 칭찬하는 사용자들
- 'Flexbox Froggy' 같은 게임을 통해 많이 배웠다고 공유하는 사용자들
- 모든 flexbox 속성을 기억하는데 어려움을 겪는 사람들을 위해 사용자가 만든 치트 시트, [darekkay.com/flexbox-cheatsheet](https://darekkay.com/flexbox-cheatsheet/)
- flexbox에 대한 지식을 새로 고치는 데 특히 유용하다고 사용자들이 'Flexbox Froggy'를 찾는다
- 개구리를 3x3 그리드에 드래그 앤 드롭하여 flexbox CSS 코드를 출력으로 얻을 수 있는 기능을 제안하는 사용자
- CSS를 읽는 데 더 초점을 맞춘 또 다른 게임, [guess-css.app](https://www.guess-css.app/),이 추천됨
- flexbox와 관련된 경험을 논의하는 사용자들, 일부는 order 속성에 대해 배우고, 다른 일부는 justify-content와 align-items의 명명법 차이에 대해 혼란을 표현
- CSS를 배우는 재미있는 방법으로 추천되는 또 다른 게임, [flexboxzombies.com](https://flexboxzombies.com/p/flexbox-zombies)