Hướng dẫn CSS Flexbox - Cách tạo một thanh điều hướng bên và dưới cùng cố định - KIEMLUA24H
   

Hướng dẫn CSS Flexbox – Cách tạo một thanh điều hướng bên và dưới cùng cố định

Hướng dẫn CSS Flexbox – Cách tạo một thanh điều hướng bên và dưới cùng cố định

 

Flexbox có thể giúp bạn đơn giản hóa quá trình tạo cả bố cục cơ bản và nâng cao. Và khá đơn giản để tạo menu điều hướng bên và dưới cùng với CSS flexbox hoặc Grid.

Các bố cục này phổ biến đến mức chúng xuất hiện hầu như ở khắp mọi nơi trên web. Ví dụ: hãy xem thanh bên của Twitter, đã truyền cảm hứng cho bài viết này:

Thông thường, để tạo một menu cố định với CSS, bạn sẽ phải sử dụng position tài sản có giá trị của một trong hai fixed hoặc sticky.

Vấn đề với cách tiếp cận này là nó đưa toàn bộ phần tử ra khỏi luồng tài liệu giống như nó chưa từng có ở đó. Đây là một trong những khoảnh khắc khó chịu trong CSS đối với người mới bắt đầu và đôi khi là cả các chuyên gia.

Trong hướng dẫn này, bạn sẽ học cách tạo một thanh bên cố định và menu điều hướng dưới cùng cố định bằng CSS flexbox thay thế. Tôi sẽ lưu trữ tất cả mã và bản trình diễn trên Codepen để bạn có thể xem bản xem trước trực tiếp về những gì chúng tôi sẽ xây dựng.

Bắt đầu

Để tạo một phần tử cố định với Flexbox, trước tiên bạn cần tắt cuộn trên phần tử mẹ của mục bạn muốn tạo cố định. Trong trường hợp của chúng tôi, phần tử mẹ là body:

body {
    overflow: hidden;
    height: 100vh;
}

Đánh dấu

Chúng tôi sẽ sử dụng HTML để tạo bố cục hai cột được bao bọc trong div gọi là wrapper.

<body>
<div class="wrapper">
  <aside>
    <ul>
      <li>Item</li>
      ...
    </ul>
  </aside>
  <main>
    <div class="wrapper_inner">
      <p>
        ...  
       </p>
     </div>
   </main>
 </div>
</body>

CSS

Để làm cho thanh bên được cố định, chúng ta chỉ cần vô hiệu hóa tính năng cuộn trên phụ huynh body và làm cho main phần tử có thể cuộn.

body {
  overflow: hidden;
  height: 100vh;
}
main {
  overflow-y: auto;
}
aside {
  flex: 1 0 10%;
}
.wrapper {
  display: flex;
  height: 100%;
}

Hãy chia nhỏ đoạn mã này một chút.

Đầu tiên chúng tôi thực hiện body không thể cuộn và ẩn các thanh cuộn bằng mã này:

body {
    overflow: hidden;
}

Sau đó sử dụng overflow: auto, chúng tôi đã thêm các thanh cuộn trở lại main yếu tố.

Và cuối cùng, chúng tôi đã tạo một vùng chứa linh hoạt wrapper và cung cấp cho nó một chiều cao bằng với cha mẹ bằng cách sử dụng height: 100%:

.wrapper {
    display: flex;
    height: 100%;
}

Cách làm cho nó thân thiện với thiết bị di động

Nhưng trên màn hình di động có chiều rộng nhỏ hơn 500px chúng tôi sẽ muốn thanh bên được cố định ở dưới cùng hoặc trên cùng tùy trường hợp. Để làm điều đó, bạn sẽ thêm CSS sau:

@media (max-width: 500px) {
  .wrapper {
    flex-direction: column-reverse;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}

Ở đây trên màn hình di động, chúng tôi thay đổi hướng của trình bao bọc linh hoạt của chúng tôi thành cột thay vì hàng. Sau đó, để làm cho nó cố định ở dưới cùng, chúng tôi thêm những điều sau:

.wrapper {
    flex-direction: column-reverse;
}

Mặt khác, để làm cho nó được cố định ở trên cùng, bạn chỉ cần loại bỏ column-reverse và thay đổi nó thành column như vậy:

.wrapper {
    flex-direction: column;
}

Bạn có thể xem bản xem trước trực tiếp trong bút được tạo bằng Codepen bên dưới. Bạn có thể thay đổi kích thước cửa sổ để xem điều hướng dưới cùng cố định:

Phần kết luận

Trong hướng dẫn này, bạn đã học cách tạo một thanh bên cố định đáp ứng với flexbox. Dưới đây là một số bước quan trọng cần nhớ:

  1. Để cố định một phần tử với flexbox, bạn phải tắt cuộn trên phần tử mẹ với overflow: hidden
  2. Sau đó, bạn cần tạo một vùng chứa flex có chiều cao bằng cha mẹ
  3. Thêm vào overflow: auto thành phần bạn không muốn cố định

Chia sẻ ngay
  
 
 
   

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Vui lòng bật JavaScript!
Nếu không bật trang không thể hoạt động bình thường![ ? ]