VietNetwork.Vn

Tạo kiểu cho nó.

Trong khi Grid và Flex đã cách mạng hóa thiết kế web bằng cách trình bày nội dung chính xác với ít thủ thuật hơn, chúng là những cơ chế có thể khó hiểu đối với bạn. Nếu bạn cảm thấy lạc lõng, hãy thử các hướng dẫn tuyệt vời này và các ứng dụng sandbox thực hành.

1. Flexbox Froggy

Gần mười năm tuổi, Flexbox Froggy là một trong những ví dụ sớm nhất và nổi tiếng nhất về việc học CSS tương tác. Trò chơi trực tuyến này dạy bạn những điều cơ bản về Flexbox, hay còn gọi là mô-đun bố cục hộp linh hoạt CSS.


Trò chơi hoạt động bằng cách trình bày một bộ nhân vật ếch dễ thương trong một lưới, không may bị tách khỏi lá súng của chúng. Sử dụng hộp văn bản có thể chỉnh sửa, nhiệm vụ của bạn là điền vào chỗ trống, sử dụng các thuộc tính như justify-content và align-items.

Quyết định của bạn sẽ định vị những chú ếch ở những vị trí thích hợp trong ao của chúng, hy vọng là xếp hàng từng chú ếch với lá súng tương ứng. Những chú ếch được mã hóa màu để phù hợp với lá súng cụ thể, vì vậy bạn sẽ cần hoán đổi chúng khi độ khó tăng lên.

Trò chơi không quá nghiêm túc, vì vậy bạn có thể chọn bất kỳ cấp độ nào bạn thích bất cứ lúc nào. Mỗi cấp độ có một nhiệm vụ được trình bày rõ ràng và trò chơi hiển thị các gợi ý hữu ích khi bạn nhấp vào tên thuộc tính CSS cụ thể. Thậm chí còn có chế độ mù màu thêm các mẫu để phân biệt giữa từng con ếch.

Bộ truyện kết thúc bằng một bài kiểm tra lớn về kiến thức tổng thể của bạn, đây thực sự là một thử thách vô cùng thỏa mãn.

Sau khi bạn đã thành thạo Flexbox, bạn có thể chuyển sang lưới CSS với phần tiếp theo, Grid Garden. Phần tiếp theo này sẽ dạy những điều cơ bản về bố cục hai chiều bằng cách sử dụng cùng một phương pháp, lần này yêu cầu bạn tưới nước cho khu vườn và giữ cho khu vườn không có cỏ dại.

2. Learn CSS Grid

Nói về CSS Grid, đây là hướng dẫn toàn diện về kỹ thuật bố cục nâng cao hơn này. Learn CSS Grid là hướng dẫn độc lập, một trang, hoạt động tốt như một tài liệu tham khảo trực quan và hướng dẫn cho người mới bắt đầu.


Bắt đầu từ những nguyên tắc đầu tiên đến các kỹ thuật nâng cao, hướng dẫn này sẽ đưa bạn qua những phức tạp của lưới CSS từng thuộc tính một. Nó không tương tác, nhưng các ví dụ tuyệt vời đã bù đắp cho điều này, trình bày chính xác cách mỗi thuộc tính và giá trị đóng góp vào bố cục tổng thể. Các sơ đồ đi kèm rất đơn giản, nhưng chúng minh họa từng điểm một cách hiệu quả.

Trong khi các ví dụ sau mang tính thực tế hơn, trọng tâm ở đây là giải thích rõ ràng từng tính chất, đặc điểm kỳ quặc và hành vi của nó khi kết hợp với các tính chất khác.

Kết quả là một người bạn đồng hành dễ tiếp cận hơn nhiều với các thông số kỹ thuật chính thức, có thể có vẻ hơi đáng sợ nếu bạn mới làm quen với CSS. Nhưng nếu bạn đang thêm lưới vào kho CSS của mình hoặc đang theo dõi một trong những tài nguyên thực hành hơn ở đây, thì đây là một tài liệu tham khảo hoàn hảo để đánh dấu.

3. Grid by Example

Trang web này hứa hẹn "mọi thứ bạn cần để học CSS Grid Layout" và nó cung cấp, với các ví dụ về các thuộc tính cụ thể, các mẫu cấp cao hơn của các mẫu thiết kế phổ biến và thậm chí cả hướng dẫn bằng video. Được tạo bởi Rachel Andrew, một thành viên của W3 CSS Working Group, Grid by Example có các bản demo rõ ràng, từ các kiểu thành phần nhỏ đến toàn bộ bố cục trang.


Các ví dụ chính bao gồm Codepens nhúng mà bạn có thể khám phá và thử nghiệm để củng cố sự hiểu biết của mình. Mỗi ví dụ cũng được liên kết với phần có liên quan của thông số kỹ thuật chính thức, do đó bạn có thể tìm hiểu sâu hơn nếu cần.

Các phương pháp tiếp cận thay thế có nghĩa là có một cách dễ dàng để bạn học, bất kể sở thích của bạn là gì. Cho dù bạn học bằng cách hiểu sâu sắc từng chi tiết cuối cùng hay bằng cách đào sâu từ một khái niệm cấp cao, bạn sẽ thấy Grid by Example có thể giúp bạn. Trang web có rất nhiều tài liệu bổ sung, ngoài các hướng dẫn cốt lõi, với các liên kết đến các dự án GitHub của Rachel theo dõi lỗi CSS và trả lời các câu hỏi thường gặp.

4. An Interactive Guide to Flexbox

Hướng dẫn này ghi điểm cao nhờ các ví dụ tương tác bao gồm các tab và thanh trượt mà bạn có thể sử dụng để điều chỉnh các thuộc tính. Khi bạn tinh chỉnh các tiện ích này, CSS đi kèm sẽ điều chỉnh để phù hợp và bạn sẽ thấy hiệu ứng theo thời gian thực trên một thành phần mẫu. Điều này giúp việc học trở nên tức thời và là minh chứng chính xác về những gì thực sự xảy ra trong trình duyệt của bạn.

Hướng dẫn tương tác về Flexbox có sơ đồ tuyệt vời giúp giải quyết mọi sự nhầm lẫn và sử dụng phép ẩn dụ thú vị về món thịt nướng để giải thích về trục, một khái niệm thường bị hiểu lầm.


Bài viết một trang này kết thúc bằng một cuộc khám phá thực tế, tuyệt vời về một nhiệm vụ chung: thiết kế biểu mẫu đăng nhập. Bài viết sử dụng Flexbox để cung cấp bốn bố cục khác nhau, tùy thuộc vào không gian có sẵn, mà không sử dụng bất kỳ truy vấn phương tiện nào. Kỹ thuật này được trình bày theo ba cách: ví dụ tương tác, codepen và video giải thích.

Tác giả tiếp tục viết hướng dẫn này bằng một hướng dẫn tương tác về CSS Grid, cũng giải thích rất rõ về bố cục hai chiều.

5. CSS Grid Layout Guide

Sớm hay muộn, bạn chắc chắn sẽ bắt gặp CSS Grid Layout Guide của Chris House —và đối tác của nó, CSS Flexbox Layout Guide —tại CSS-Tricks. Trang web này có rất nhiều bài viết và hướng dẫn hữu ích, nhưng cặp bài viết này đại diện cho những gì tốt nhất mà nó cung cấp, và chúng có lẽ là nguồn tài nguyên CSS được trích dẫn nhiều nhất hiện có. Hầu như mỗi lần tôi thấy mình có câu hỏi về grid hoặc Flexbox, tôi dường như đều kết thúc ở đây.

Hai hướng dẫn này thực tế là tiêu chuẩn để tìm hiểu về CSS grid và Flexbox. Chúng là những tài liệu tham khảo tuyệt vời, với sơ đồ trực quan và giải thích rõ ràng về các thuộc tính, được nhóm theo mục đích của chúng. Chúng không nhất thiết dành cho người mới bắt đầu hoàn toàn, nhưng rất phù hợp với bất kỳ ai đang chuyển đổi từ bố cục dạng float hoặc các phương án thay thế cũ hơn.


Mỗi hướng dẫn trình bày các thuộc tính trong hai cột, một cột dành cho các thuộc tính áp dụng cho vùng chứa cha mẹ và cột còn lại dành cho vùng chứa con. Đây là cách tiếp cận tài liệu thực tế, giúp củng cố hiểu biết của bạn về cách các cơ chế khác nhau này tiếp cận vấn đề bố trí nội dung.

Mặc dù cả hai nguồn đều có nhiều phần, bao gồm các ghi chú về thuật ngữ, hỗ trợ trình duyệt và lỗi, nhưng phần thuộc tính là hữu ích nhất. Trang web thực sự mở rộng các phần này theo mặc định, để lại các phần khác được thu gọn, điều này nhấn mạnh mức độ chúng là trọng tâm chính.

6. What The Flexbox?!

What The Flexbox?! là một khóa học video cũ hơn nhưng vẫn còn phù hợp cho đến ngày nay. Được trình bày bởi Wes Bos, một nhà phát triển web và giáo viên giàu kinh nghiệm, bộ video này bao gồm mọi thứ từ flex-direction đến bố cục "cột có chiều cao bằng nhau" được săn đón nhiều.

Wes là một người thuyết trình hấp dẫn, người giải thích từng phần của các ví dụ mã khi anh ấy nói, và loạt bài này rất phù hợp với người mới bắt đầu và những người quen thuộc với những điều cơ bản của CSS. Nếu bạn thích học từ một giọng nói giàu kinh nghiệm, với tốc độ giúp bạn dễ dàng theo dõi, thì loạt bài hướng dẫn này là hoàn hảo cho bạn. Hầu hết các video dài 5–10 phút, vì vậy chúng không quá chi tiết, bao gồm từng chủ đề một cách chính xác nhưng súc tích.

Trong khi các video được lưu trữ miễn phí trên trang web của Wes, nơi yêu cầu địa chỉ email của bạn để có quyền truy cập đầy đủ, bạn cũng có thể xem chúng trên kênh YouTube của anh ấy. Giống như nhiều tài nguyên ở đây, cũng có một hướng dẫn tương ứng về lưới.