Xác định trục trước khi chọn thuộc tính CSS
Đọc các miếng hoa súng mục tiêu của cấp độ và kiểm tra sự sắp xếp hiện tại của ếch. Theo hướng hàng mặc định, justify-content hoạt động dọc theo trục chính ngang và align-items dọc theo trục chéo dọc. Trước khi nhập một giá trị, hãy nêu trục bạn muốn thay đổi. Thói quen này giúp ngăn ngừa một sai lầm phổ biến: chọn giá trị phù hợp cho một tài sản có hướng đi khác.
Khi flex-direction thay đổi thành cột, trục chính và trục chéo cũng thay đổi theo nó. Đánh giá lại thuộc tính thay vì cho rằng justify-content luôn có nghĩa là chuyển động theo chiều ngang. Nhập một thay đổi CSS trong trình chỉnh sửa và so sánh vị trí kết quả với mục tiêu. Những con ếch được định vị bởi CSS của bạn chứ không được kéo vào vị trí. Sử dụng các gợi ý của cấp độ và các thuộc tính được phép để giữ cho thử nghiệm gắn liền với nhiệm vụ thực sự được hiển thị.
Giải thích thay đổi không thành công trước khi thử thay đổi khác
Sau khi thay đổi không đạt mục tiêu, hãy hỏi xem thuộc tính có ảnh hưởng sai trục hay không, giá trị đã chọn đã sắp xếp các mục khác với mong đợi của bạn hay hướng hiện tại đã thay đổi ý nghĩa của bố cục. Hãy giữ lại phần nội quy bạn hiểu và sửa lại một điều. Việc thay thế một số thuộc tính cùng một lúc có thể đạt được mục tiêu trong khi khiến bạn không chắc chắn thay đổi nào đã giải quyết được vấn đề.
Để ôn tập, hãy mô tả quy tắc thành công bằng lời trước khi tiếp tục: quy tắc đó đã sử dụng trục nào và cách quy tắc định vị những con ếch so với lá hoa súng. Các cấp độ sau có thể kết hợp các ý tưởng, vì vậy cách giải thích này hữu ích hơn việc ghi nhớ một dòng mà không có ngữ cảnh. Hướng dẫn này không cung cấp danh sách câu trả lời hoàn chỉnh được phát minh ra hoặc tuyên bố rằng việc giải trò chơi chứng nhận kỹ năng CSS chuyên nghiệp. Trang phát được liên kết cung cấp cho người chỉnh sửa các điều khiển và khung tác vụ chính xác; trung tâm hỗ trợ sự hiểu biết và thực hành ở các cấp độ bạn thực sự gặp phải.
Ví dụ: nếu một quy tắc thay đổi những con ếch theo chiều dọc khi bạn định di chuyển theo chiều ngang, hãy kiểm tra flex-direction và xác định trục chính hiện tại trước khi chọn một giá trị khác. Nói to mối quan hệ: thuộc tính này thay đổi sự phân bố dọc theo trục chính và trục chính hiện đang chạy theo hướng này. Sau đó thực hiện một chỉnh sửa và kiểm tra kết quả. Sau khi nó có tác dụng, hãy kiểm tra lời giải thích của bạn dựa trên những miếng hoa huệ có thể nhìn thấy được. Điều này biến dự đoán không thành công thành ý tưởng bố cục có thể sử dụng lại thay vì lệnh bạn chỉ nhớ cho một màn hình.
Mẹo và chiến lược cho Flexbox Froggy
Đánh dấu mẹo muốn luyện ở lượt tiếp theo. Danh sách này không thay đổi trò chơi hay lưu tiến độ chơi.
Câu hỏi và câu trả lời về Flexbox Froggy
Tôi có cần cài đặt công cụ lập trình nào không?
Không. Trình chỉnh sửa CSS nằm bên trong trò chơi trên trình duyệt.
Đây có phải là một khóa học phát triển web hoàn chỉnh không?
Đây là một trò chơi thực hành tương tác về các khái niệm bố cục flexbox. Nó không thay thế cho một khóa học HTML và CSS toàn diện hơn.
Ai là người tạo ra dự án này?
Thomas Park đã tạo ra Flexbox Froggy. Mã nguồn được cấp phép theo giấy phép MIT và tác phẩm nghệ thuật được ghi lại sử dụng CC BY 3.0; các liên kết ghi nguồn được liệt kê bên dưới.
Vì sao flex-end đổi phía khi đảo hướng?
Điểm đầu và cuối theo trục chính, không phải mép trái và phải cố định. Với row-reverse, trục bắt đầu bên phải nên justify-content: flex-end đặt phần tử bên trái. Kiểm tra flex-direction trước. align-items chỉnh trục phụ và giải quyết vấn đề vị trí khác.
Điều khiển và hướng dẫn đầy đủ
Điều khiển và hướng dẫn đầy đủ
Chơi Flexbox Froggy