GN⁺: Flexbox Froggy

(flexboxfroggy.com)

'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'을 추천하는 기사

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