Cách tạo thanh điều hướng đáp ứng đầy đủ với Flexbox

Một thanh điều hướng, ba bố cục khác nhau.

Trong bài viết này, tôi sẽ giải thích cách tạo một thanh điều hướng thích ứng với các kích thước màn hình khác nhau bằng Flexbox cùng với các truy vấn phương tiện.

Hướng dẫn này cũng có thể được tìm thấy như một screencast tương tác trong khóa học Flexbox miễn phí của tôi tại Scrimba.

Để đọc thêm về khóa học, hãy xem bài viết này.

Các thiết lập

Hãy bắt đầu với việc đánh dấu cho một thanh điều hướng rất đơn giản:

<điều hướng>
  
        
  • Trang chủ     
  • Hồ sơ     
  •                 
  • Đăng xuất   

Phần tử

    là bộ chứa flex của chúng tôi và các phần tử
  • là các mục flex của chúng tôi. Để biến nó thành bố cục Flexbox, chúng tôi sẽ thực hiện:

    .thùng đựng hàng {
      hiển thị: flex;
    }

    Điều này sẽ dẫn đến bố cục sau:

    Tôi đã thêm một số kiểu dáng, nhưng điều đó không liên quan gì đến Flexbox.

    Như bạn có thể thấy, chúng tôi có thêm một chút không gian ở phía bên tay phải. Điều này là do Flexbox sắp xếp các mục đi từ trái sang phải và mỗi mục chỉ rộng bằng nội dung của nó.

    Vì container flex theo mặc định là một phần tử mức khối (và rộng hơn bốn mục), chúng tôi nhận được khoảng cách ở cuối.

    Lý do các mục tìm kiếm rộng hơn các mục khác là vì các trường đầu vào theo mặc định được đặt thành size = "20", các trình duyệt và hệ điều hành khác nhau diễn giải theo các cách khác nhau.

    Phản hồi số 1

    Để cung cấp khả năng đáp ứng cơ bản cho thanh điều hướng của chúng tôi, chúng tôi chỉ cần cung cấp cho mục tìm kiếm giá trị flex là 1.

    .Tìm kiếm {
      uốn cong: 1;
    }

    Điều này dẫn đến việc mục tìm kiếm mở rộng và thu hẹp theo chiều rộng của container, có nghĩa là chúng tôi đã giành được khoảng trống ở phía bên tay phải.

    Mặc dù có ý nghĩa khi mục tìm kiếm phát triển trong khi các mục khác cố định, bạn có thể lập luận rằng nó có thể trở nên quá rộng so với các mục khác. Vì vậy, nếu bạn muốn có tất cả các mục tăng theo chiều rộng của container, bạn có thể chỉ cần cung cấp cho tất cả các mục có giá trị flex là 1.

    .container> li {
      uốn cong: 1;
    }

    Ở đây, cách thức diễn ra:

    Bạn cũng có thể cung cấp cho các mục giá trị flex khác nhau, điều này sẽ khiến chúng phát triển với tốc độ khác nhau. Hãy thử nghiệm điều đó trong sân chơi Scrimba này.

    Đối với phần còn lại của hướng dẫn, chúng tôi sẽ tiếp tục với giải pháp đầu tiên, trong đó các mục tìm kiếm là mục duy nhất có giá trị flex.

    Phản hồi số 2

    Thanh điều hướng của chúng tôi hoạt động tốt trên màn hình rộng. Tuy nhiên, trên những cái hẹp hơn, nó gặp vấn đề, như bạn có thể thấy ở đây:

    Tại một số điểm, nó không thể có tất cả các mặt hàng trên cùng một hàng, vì container trở nên quá hẹp. Để giải quyết vấn đề này, chúng tôi sẽ thêm một truy vấn phương tiện trong đó chúng tôi sẽ chia bốn mục của chúng tôi thành hai hàng. Truy vấn phương tiện sẽ khởi động khi màn hình rộng 600px:

    @media tất cả và (chiều rộng tối đa: 600px) {
      
      .thùng đựng hàng {
        flex-quấn: bọc;
      }
      
      .container> li {
        cơ sở linh hoạt: 50%;
      }
    }

    Đầu tiên, chúng tôi cho phép bố trí Flexbox để bọc bằng flex-quấn. Điều này theo mặc định được đặt thành nowrap, vì vậy chúng tôi sẽ phải thay đổi nó để bọc.

    Điều tiếp theo chúng tôi thực hiện là đặt giá trị cơ sở flex flex thành 50%. Điều này nói với Flexbox để làm cho mỗi mục chiếm 50% chiều rộng có sẵn, kết quả là hai mục trên mỗi hàng, như sau:

    Lưu ý: Tôi cũng đã căn giữa văn bản giữ chỗ trong trường nhập tìm kiếm.

    Bây giờ chúng tôi có hai trạng thái khác nhau. Tuy nhiên, bố cục này vẫn không hoạt động trên các màn hình rất nhỏ, như màn hình di động ở chế độ dọc.

    Nếu chúng ta tiếp tục thu nhỏ màn hình, nó sẽ kết thúc giống như hình ảnh bên dưới.

    Điều gì xảy ra ở đây là hàng thứ hai có thể phù hợp với hai mặt hàng nữa.

    Đăng xuất và các mục tìm kiếm đơn giản là quá rộng, vì bạn có thể thu nhỏ chúng xuống dưới độ rộng tối thiểu của chúng, đó là chiều rộng chúng cần để điền vào nội dung bên trong chúng.

    Các mục nhà và hồ sơ vẫn có thể xuất hiện trên cùng một hàng, vì vậy Flexbox sẽ cho phép chúng làm như vậy. Đây là tối ưu, vì chúng tôi muốn tất cả các hàng của chúng tôi hoạt động theo cùng một cách.

    Phản hồi số 3

    Vì vậy, ngay sau khi một trong các hàng có thể xếp vừa hai mặt hàng theo chiều rộng, chúng tôi muốn không có hàng nào có hai mặt hàng theo chiều rộng. Nói cách khác, trên các màn hình rất nhỏ, chúng tôi sẽ thực sự làm cho thanh điều hướng thẳng đứng. Chúng tôi sẽ xếp các mục lên nhau.

    Để đạt được điều này, chúng tôi chỉ cần thay đổi chiều rộng 50% của chúng tôi thành 100%, sao cho mỗi hàng chỉ phù hợp với một mục duy nhất. Chúng tôi sẽ thêm điểm dừng này ở 400px.

    @media tất cả và (chiều rộng tối đa: 400px) {
      .container> li {
        cơ sở flex: 100%;
      }
      .Tìm kiếm {
        thứ tự: 1;
      }
    }

    Ngoài ra, tôi còn muốn đặt mục tìm kiếm ở phía dưới, đó là lý do tại sao I 99m cũng nhắm mục tiêu tìm kiếm và đặt cho nó giá trị đơn hàng là 1.

    Điều này dẫn đến kết quả như sau:

    Thứ tự lý do: 1; kết quả trong mục tìm kiếm được đặt ở dưới cùng là do các mục flex theo mặc định có giá trị bằng 0 và bất kỳ mục nào có giá trị cao hơn giá trị đó sẽ được đặt sau các mục khác.

    Để xem tất cả diễn ra như thế nào, ở đây, hãy gif gif từ đầu bài viết:

    Chúc mừng! Bây giờ bạn đã biết cách tạo một thanh điều hướng đáp ứng đầy đủ bằng cách sử dụng Flexbox và truy vấn phương tiện.

    Nếu bạn có hứng thú tìm hiểu thêm về Flexbox, tôi sẽ khuyên bạn nên xem khóa học miễn phí của tôi tại Scrimba.

    Nhấp vào hình ảnh để đến khóa học Flexbox miễn phí của tôi.

    Cảm ơn vì đã đọc! Tên tôi là Per, tôi là người đồng sáng lập Scrimba và tôi thích giúp mọi người học các kỹ năng mới. Theo dõi tôi trên Twitter nếu bạn muốn được thông báo về các bài báo và tài nguyên mới.