Flexbox Froggy

• Bài viết giới thiệu trò chơi Flexbox Froggy giúp học viết mã CSS
• Trò chơi dùng thuộc tính justify-content để hướng dẫn chú ếch tới lá súng
• Thuộc tính justify-content dùng để căn chỉnh các phần tử theo chiều ngang bên trong một vùng chứa
• Thuộc tính này chấp nhận nhiều giá trị như flex-start (căn các phần tử sang trái), flex-end (căn các phần tử sang phải), center (căn các phần tử vào giữa), space-between (khoảng cách bằng nhau giữa các phần tử), space-around (khoảng cách bằng nhau xung quanh các phần tử)
• Có ví dụ cho thấy justify-content: flex-end; sẽ di chuyển chú ếch sang bên phải
• Trò chơi Flexbox Froggy do Codepip tạo ra, có kèm các liên kết GitHub và Twitter
• Bài viết cũng gợi ý Grid Garden cho những ai muốn học CSS Grid

[GN⁺]

Ý kiến trên Hacker News

• Bài viết về 'Flexbox Froggy', một trò chơi học CSS
• Người dùng giới thiệu các trò chơi tương tự để học CSS, cssgridgarden.com, cssbattle.dev, flukeout.github.io, và css-animations.io
• Người dùng bày tỏ việc khó ghi nhớ các thuộc tính flex như align-content và align-items, ví như vấn đề thường gặp khi cắm ngược cáp USB
• Người dùng khen ngợi CSS Grid và các tùy chọn bố cục mà nó mang lại
• Người dùng chia sẻ rằng họ đã học được rất nhiều thông qua các trò chơi như 'Flexbox Froggy'
• Một cheat sheet do người dùng tạo ra dành cho những ai gặp khó khăn trong việc nhớ tất cả các thuộc tính flexbox, darekkay.com/flexbox-cheatsheet
• Người dùng thấy 'Flexbox Froggy' đặc biệt hữu ích để ôn lại kiến thức về flexbox
• Một người dùng đề xuất tính năng cho phép kéo thả chú ếch vào lưới 3x3 để nhận mã CSS flexbox ở đầu ra
• Một trò chơi khác tập trung nhiều hơn vào việc đọc CSS, guess-css.app, cũng được khuyến nghị
• Người dùng thảo luận về trải nghiệm liên quan đến flexbox; một số học về thuộc tính order, số khác bày tỏ sự bối rối trước sự khác biệt trong cách đặt tên giữa justify-content và align-items
• Một trò chơi khác cũng được khuyên dùng như cách học CSS thú vị, flexboxzombies.com