Làm sao để master flexbox trong một ngày?

baoo · January 15, 2023, 11:49am

Vào những năm 2000 các thương hiệu sản xuất thiết bị điện tử cho ra mắt nhiều loại màn hình với kích thước khác nhau gây khó khăn cho người lập trình giao diện web, trước thời điểm năm 2009 lập trình viên thường sử dụng table để làm layout cho trang web, vào ngày 23/7/2009 flexbox đã ra đời (version 1.0) giúp việc thiết kế layout trở nên dễ dàng hơn, flexbox là một trong những thuộc tính CSS hỗ trợ việc thiết kế web đạt tiêu chuẩn responsive, tính đến năm 2020 đã có 98,68% trình duyệt hỗ trợ flexbox.

Kiến thức về flexbox bạn có thể tham khảo tại đây https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox.
Kinh nghiệm về các tình huống sử dụng flexbox: https://css-tricks.com/?s=flexbox.

Nhưng trong bài viết này mình sẽ giúp bạn luyện phản xạ sử dụng flexbox, sau khi chơi hết 6 game này bạn sẽ có được kỹ năng nhìn mảng JSON đoán được layout, chỉ cần nhìn enpoint API sẽ tự tưởng tượng được layout sắp được áp dụng cho web API đó Đặc biệt là tránh được tình trạng căn giữa thẻ div như này:

1. Flexbox Froggy

Link game: https://flexboxfroggy.com
Cách chơi:
- Lá sen là vị trí dev mong muốn element sẽ ở vị trí này trong layout.
- Những chú ếch là vị trí của element hiện tại.
- Người chơi chỉ cần điều chỉ cho những chú ếch ngồi vào đúng vị trí theo màu tương ứng.

Game có 3 level difficulty, mình đã hoàn thành 24 màn trong 1 phút 02 giây ở chế độ level 2 còn các bạn thì sao ?

2. Flexbox ducky

Link game: https://courses.cs.washington.edu/courses/cse154/flexboxducky
Cách chơi: Giống hoàn toàn game bên trên.
Fact: Thật ra game này build dựa trên source của game bên trên chỉ thay những con ếch thành những chú vịt , nếu bạn sợ ếch thì có thể chơi game này

3. Nỏ Thần An Dương Vương

Link game: https://mastery.games/flexboxzombies
Điểm nổi bật: các giá trị flex-start, flex-end của thuộc tính justify-content, align-items bị phụ thuộc vào thuộc tính flex-direction, game này sẽ giúp bạn luyện nhanh phản xạ này.
Cách chơi:
- Giương nỏ thần lên, vào tư thế ngắm bắn bằng, nhắm 1 mắt bằng display: flex, sau đó nỏ sẽ tự động phát ra 2 tia lazer, tia màu đỏ tương ứng với main axis (ngắm bắn bằng justify-content) tia màu xanh tương ứng với cross axis (ngắm bằng align-items)
- Xoay người, điều chỉnh hướng bắn bằng:
  - Hướng đông: flex-direction: row (đây là giá trị mặc định của flex, không cần khai báo)
  - Hướng bắc: flex-direction: column-reverse
  - Hướng nam: flex-direction: column
  - Hướng tây: flex-direction: row-reverse
- Lock mục tiêu dùng các thuộc tính tính justify-content, align-content, align-items, …
Game có 2 lỗi nhỏ:
- Element chưa có thuộc tính display-flex mà flex-direction đã hoạt động.
- Chơi trên thiết bị màn hình nhỏ hoặc độ phân giải thấp phải thu nhỏ web, nếu không các tầm ngấm bị dính liền vào nhau vì kích thước quá to.
Nhận xét: Mình nhận thấy đây là game hay nhất, game tổng cộng có 226 màn chơi khác nhau với 12 chapter. Mình đã hoàn thành game sau gần 1 giờ chơi.

4. Flexbox defense

Link game: http://www.flexboxdefense.com
Cách chơi: Dùng các thuộc tính CSS để di chuyển tháp pháo đến gần đường di chuyển của kẻ địch.
Điểm nổi bât: Lối chơi khá mới lạ so với những game khác, thuộc dòng game thủ thành (tower defense), không có đáp án cố định cho mỗi màn chơi, miễn sao sắp xếp tháp pháo hợp lý là được.
Hạn chế: Mỗi màn chơi phải tốn thời gian chờ kẻ địch đi ngang qua các tháp pháo nhưng web không cho chạy nền nghĩa là lúc game đang xử lý không được mở app khác, không được chuyển tab. Chỉ 12 màn chơi khá ít.

Mình mất khoảng 15 phút để hoàn thành game này. Có ai phát hiện vị trí các khẩu pháo trong ảnh bất hợp lý chỗ nào không?

5. Flexbox adventure

Link game: https://codingfantasy.com/games/flexboxadventure
Điểm nổi bật: Game có đưa vào giá trị space-evenly của thuộc justify-content, những game khác không có.
Cách chơi: : Điều chỉnh vị trí hiệp sĩ đứng trực diện với quái vật bằng các thuộc tính flexbox.
Nhận xét: Lối chơi khá giống game flexbox froggy, game chủ yếu tập trung vào các thuộc tính áp dụng cho element cha, không có thuộc tính kích thước element con như: flex-grow, flex-shrink, flex-basis. Các cấp độ khó không khác biệt nhiều. Mình mất gần 20 phút để hoàn thành 72 màn chơi cho cả 3 level.

6. Knights of the flexbox table

Link game: https://knightsoftheflexboxtable.com
Giới thiệu: Đây là game để luyện flexbox bằng thư viện tailwind css (đây là một thư viện Atomic CSS tương tự như tachyons, basscss, acss.io, …) sau khi đã nhuần nhuyễn cách sử sụng flexbox bằng cách viết CSS thuần túy.
Cách chơi: sử dụng các class của thư viện tailwind css để đưa hiệp sĩ vào trí rương kho báu.

Truong_Nguyen_Quang · June 3, 2022, 3:41pm

con ếch bài 24 khó thế

baoo · June 3, 2022, 4:22pm

level 24 chỉ cần 3 thuộc tính CSS:

Nhận thấy list ếch cần xếp theo cột dọc => nghĩ ngay đến flex-direction: column, nhưng chọn giá trị column hay column-reverse?
- Ếch đỏ đứng đầu hàng, nếu chọn column thì hàng bắt đầu xếp theo chiều từ trên xuống dưới, (hàng ngang ban đầu xoay 90° quanh tâm điểm ếch đỏ theo chiều âm)
  
  => loại giá trị column
- Vẫn còn ngược so với yêu cầu => xoay ngược lại => chọn column-reverse;
Từ một cột ếch cần tách ra cột mới khi một cột đã full item => Nghĩ ngay đến flex-wrap, mặc định cột mới xếp từ trái sang phải, đề bài cột bắt đầu xếp từ phải sang trái => chọn value wrap-reverse.

Kết hợp lại ta có : flex-flow: column-reverse wrap-reverse;

Do column-reverse nên trục main có hướng từ dưới màn hình lên trên, thuộc tính ứng với trục main là justify-content: center;
Để 2 cột giãn cách ra 2 cạnh (cũng do đang là column nên hàng ngang bây giờ là trục cross) => chọn thuộc tính liên quan đến align- (align-items hay align-content?) => do có nhiều cột nên chọn align-content: space-between.

Cuối cùng đáp án là:

flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

(ít hơn đáp án tác giả mong đợi 1 dòng vì đã gộp flex-direction & flex-wrap thành một dòng)