Flexbox: Xây dựng một thanh điều hướng (Part1/2)

Mục tiêu của loạt bài này là giúp bạn tìm hiểu Flexbox theo cách tương tác thú vị và sau đó giúp bạn xây dựng các ví dụ thực tế đơn giản như thanh điều hướng bằng cách sử dụng Flexbox.

Trong bài viết đầu tiên này, bạn sẽ tìm thấy cách tuyệt vời để bắt đầu với Flexbox.

Trong bài viết thứ hai, bạn sẽ tìm hiểu cách xây dựng một ví dụ đơn giản về thiết kế điều hướng responsive bằng cách sử dụng Flexbox và truy vấn @media.

Để tận dụng tối đa nội dung này, bạn cần có hiểu biết cơ bản về HTML và CSS. Nếu bạn có điều này, hãy tiếp tục xem phía dưới.

Giới thiệu về Flexbox

Flexbox là chế độ bố cục CSS giúp bạn dễ dàng tạo các trang web responsive. Nó cho phép chúng ta dễ dàng thao tác các phần tử con (child elements) (còn gọi là các flex item) của một flex container.

Ví dụ: Bạn có thể:

- Sắp xếp lại các flex item.
- Dễ dàng đặt các item trong một hàng bên cạnh nhau và sau đó bằng cách điều chỉnh cửa sổ trình duyệt, khoảng cách giữa chúng cũng sẽ điều chỉnh.
- Làm cho các item đó được bọc vào dòng tiếp theo (bên trong container) khi màn hình nhỏ hơn, v.v.

Flexbox không phải là giải pháp cho mọi thứ. Nó chỉ giống như một cầu thủ trong một trận bóng đá tuyệt vời.

Mỗi người chơi đều có giá trị, nhưng tất cả đều đóng một vai trò khác nhau. Nếu một người chơi phải chơi cho 2 vị trí, thì sẽ không phát huy được sức mạnh tốt nhất.

Điều tương tự cũng áp dụng cho việc lập trình. Nếu bạn cố gắng sử dụng Flexbox cho tất cả mọi thứ (cuối cùng bạn sẽ mất đi nhiều thứ), và sẽ khó quản lý hơn.

Nếu bạn có thể nhận ra điều đó, có những công cụ hiện nay có sẽ giúp bạn làm cho quá trình này dễ dàng hơn (chẳng hạn như CSS Grid).

Cú pháp Flexbox

Tôi đã học được hầu hết những gì tôi biết về phát triển front-end từ w3schools, bao gồm cả Flexbox.

Bởi vì Flexbox khá đơn giản để hiểu, tôi không nghĩ rằng nó là cần thiết để mua một khóa học trực tuyến.

Bạn sẽ có thể nắm bắt nó nhanh hơn bằng cách đọc và hiểu những điều cơ bản. Sau đó nhảy thẳng vào code và học bằng cách thực hành.

Học tập bằng cách chơi

Với Flexbox Froggy, bạn có thể chơi trò chơi và học flexbox cùng một lúc. (Tôi cũng đã giới thiệu chúng trong bài này)

Nó được tạo ra bởi Thomas Park, nhà nghiên cứu tại Đại học Drexel. Anh là một trong những cộng tác viên của openHTML, một dự án nghiên cứu cộng tác nhằm thiết kế các công cụ và thực hành tốt hơn cho việc học phát triển web.

Flexbox Playground

Hãy chơi vui vẻ trên Flexbox Playground để xem điều gì sẽ xảy ra khi bạn thao tác với flex container và flex item. Nó được tạo ra bởi Dimitar Stojanov, người sáng lập của Invoicebus.

Tóm lại

Chúng ta hoàn toàn có thể học từng module nhỏ bằng cách đọc và nhảy thẳng vào thực hành mà không tốn 1 đồng nào cả.

Bài tiếp tôi sẽ hướng dẫn bạn cách làm một thanh điều hướng nhỏ và chơi với @media nữa.