Flexbox Froggy
(flexboxfroggy.com)- Một trò chơi học tương tác cho phép nhập trực tiếp CSS flexbox để đưa chú ếch tới lá súng, nhờ đó có thể thấy ngay hiệu quả của các thuộc tính căn chỉnh trên màn hình
- Ở cấp độ đầu tiên,
#pondđã được đặtdisplay: flex;, và người chơi thay đổi căn chỉnh theo chiều ngang bằngjustify-content justify-contentđiều chỉnh cách sắp xếp các phần tử trong container với các giá trị nhưflex-start,flex-end,center,space-between,space-around- Ví dụ, khi nhập
justify-content: flex-end;, chú ếch sẽ di chuyển tới lá súng bên phải, giúp liên hệ trực tiếp giữa thuộc tính và kết quả - Toàn bộ gồm 24 cấp độ, đồng thời hỗ trợ nhiều ngôn ngữ bao gồm tiếng Hàn và chế độ hiệu chỉnh mù màu
Cách học CSS flexbox bằng trò chơi
- Flexbox Froggy là trò chơi học CSS flexbox bằng cách đưa Froggy và các bạn đến đúng vị trí mục tiêu
- Khi viết thuộc tính vào vùng chỉnh sửa mã CSS của
#pondtrên màn hình, vị trí của chú ếch sẽ thay đổi - Ở cấp độ đầu tiên, nhiệm vụ là dùng
justify-contentđể đưa chú ếch tới lá súng bên phải - Mã mặc định hiển thị cấu trúc sau
#pond {display: flex;}
Học căn chỉnh ngang với justify-content
justify-contentlà thuộc tính dùng để căn chỉnh các phần tử theo chiều ngang- Có thể sử dụng các giá trị sau
flex-start: căn các phần tử về bên trái containerflex-end: căn các phần tử về bên phải containercenter: căn các phần tử vào giữa containerspace-between: đặt khoảng cách bằng nhau giữa các phần tửspace-around: đặt khoảng cách bằng nhau xung quanh các phần tử
- Khi dùng
justify-content: flex-end;, chú ếch sẽ di chuyển sang phải, cho phép so sánh ngay giá trị thuộc tính và kết quả bố trí
Cấu trúc và tài liệu học liên quan
- Trò chơi hiển thị Level 1 of 24, và phần cài đặt ngôn ngữ có nhiều lựa chọn bao gồm tiếng Hàn
- Các trò chơi liên quan để học thêm CSS gồm Grid Garden và Anchoreum
1 bình luận
Ý kiến trên Hacker News
Cũng có những tài liệu dạng game khác rất tốt để học CSS
https://cssgridgarden.com/ — khá giống Froggy dành cho Grid
https://cssbattle.dev/ — một nền tảng giải nhiều thử thách khác nhau, cộng đồng cũng lớn
https://flukeout.github.io/ — học bộ chọn CSS
https://css-animations.io/ — luyện tập CSS animation
https://css-tricks.com/understanding-flex-grow-flex-shrink-a... — giải thích flex-grow, flex-shrink, flex-basis
Dù đã làm việc với CSS nhiều năm, các thuộc tính liên quan đến flex như align-content và align-items lần nào cũng dễ nhầm
Cảm giác như lúc nào cũng cắm ngược cáp USB, align và justify cũng vậy
CSS Grid cũng thật sự tuyệt vời. Giờ có quá nhiều lựa chọn layout xuất sắc đến mức có thể nói chúng ta đang được hưởng khá nhiều tiện nghi
Tôi cũng in cả hai bảng tóm tắt ra để trên bàn, chúng thật sự là tài liệu rất giá trị
[0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
[1] https://css-tricks.com/snippets/css/complete-guide-grid/
justify-tương ứng với trục chính, cònalign-tương ứng với trục chéo-contentdùng cho các track của grid hoặc các hàng của containerflex-wrap, còn-itemsdùng cho từng phần tử con riêng lẻ, tức là các item bên trong một hàng hoặc ô gridDù vậy, giá mà tên gọi rõ ràng hơn thì tốt
flex-direction. Vì thế các thuộc tính nhưflex-aligntrở thành cấu trúc thay đổi theo hướng của phần tử chaTrên thực tế, rất hiếm khi đổi hướng mà thu được lợi ích lớn từ việc đó
Tôi không biết đó có phải lý do duy nhất không nên cũng không khẳng định đó là lựa chọn tệ, nhưng việc không nhớ bên nào là bên nào thì tôi cũng y như vậy
Giá mà tên gọi tốt hơn, thể hiện trực tiếp trục, hoặc thuộc tính độc lập với hướng của phần tử cha thì đã hay; còn trước lúc đó thì phải dùng cheat sheet thôi
Tuy nhiên cũng không thường xuyên phải để ý đến chúng, nên có lẽ vì vậy mà càng khó nhớ hơn
Tôi đã học được rất nhiều thứ từ những game kiểu này. Vim cũng học bằng https://vim-adventures.com/, và giờ thì gần như không thể sống thiếu Vim
Các bài HN trước đây:
https://news.ycombinator.com/item?id=30251054 năm 2022, 317 điểm, 31 bình luận
https://news.ycombinator.com/item?id=22629903 năm 2020, 27 điểm, 2 bình luận
https://news.ycombinator.com/item?id=21796926 năm 2019, 2 điểm, 0 bình luận
https://news.ycombinator.com/item?id=18752031 năm 2018, 3 điểm, 0 bình luận
https://news.ycombinator.com/item?id=18731852 năm 2018, 6 điểm, 1 bình luận
https://news.ycombinator.com/item?id=15605783 năm 2017, 4 điểm, 0 bình luận
https://news.ycombinator.com/item?id=14349739 năm 2017, 3 điểm, 0 bình luận
https://news.ycombinator.com/item?id=10652909 năm 2015, 315 điểm, 69 bình luận
Tuyệt vời. Trước đây khi học flexbox tôi đã dùng cái này
Cũng có https://codepip.com/games/grid-garden/ do cùng tác giả làm, giúp học CSS Grid theo cùng cách tiếp cận
Có lẽ vì nó tạo ra một lộ trình học rất tự nhiên: giải những bài thoạt nhìn có vẻ dễ nhờ những gì đã học, rồi dần dần khó hơn
Trước đây tôi từng chơi game này khá vui để học CSS selector: https://flukeout.github.io/
Guess CSS cũng có mục Flexbox, nhưng tập trung nhiều hơn vào việc đọc CSS hơn là viết CSS: https://www.guess-css.app/
positioncảCác bài khác thì tôi vẫn đoán đúng được, nhưng đến position thì cứ sai mãi
Rất hữu ích. Tôi lúc nào rồi cũng phải đi tìm lại cách căn chỉnh theo chiều dọc trong flexbox
Nếu muốn giúp nhanh chóng khơi lại kiến thức flexbox khi đang cần gấp, sẽ rất hay nếu có tính năng kéo-thả con ếch vào lưới 3x3 rồi xuất ra đoạn CSS flexbox tương ứng
Dù vậy đây vẫn là một tutorial được làm rất tỉ mỉ
Tôi nói vậy vì cá nhân tôi đã bỏ cuộc trong việc liên tục theo kịp các tính năng CSS mới. Tôi đã dùng CSS lắt nhắt từ thời IE7, trải qua thời phải tự viết vendor prefix và những tính năng mới mà Chrome Canary cứ nhồi vào, nên không còn năng lượng để giữ các mẹo CSS trong đầu nữa
Với phần lớn UI, chỉ flexbox là đủ; về cơ bản nó là công cụ để xếp các mục theo chiều dọc/ngang, giống như stack/group hoặc vbox/hbox
Cứ học flexbox là được. Đây là thứ hữu ích nhất từng được đưa vào layout CSS và thật sự rất đơn giản. Khoảng cách thì dùng
gap, bố trí thì chủ yếu là justify và align, 99% là xong ở đóTôi thích Flexbox Froggy. Có thể nói cả một thế hệ lập trình viên đã học flexbox nhờ trang này. Tôi cũng vậy
Lúc đó tôi đã dùng CSS được 15 năm rồi
Một công cụ giáo dục đáng kinh ngạc
Hướng dẫn tương tác về flexbox của Josh Comeau cũng đáng xem: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...
Hay. Ước gì cũng có phiên bản Tailwind