Bài viết này sẽ giải thích phương pháp ngăn các mục linh hoạt gói trong Tailwind CSS.
Làm cách nào để ngăn chặn/ngăn các vật phẩm linh hoạt đóng gói trong Tailwind?
Để ngăn các mục linh hoạt gói trong Tailwind, hãy tạo một tệp HTML. Sau đó, sử dụng tiện ích “flex-nowrap” với bộ chứa flex trong chương trình HTML để ngăn chặn các mục flex bị gói. Tiếp theo, đảm bảo các thay đổi bằng cách xem trang web HTML.
Hãy thử các bước được đề cập dưới đây để hiểu rõ hơn về nó:
Bước 1: Ngăn các mục linh hoạt đóng gói trong chương trình HTML
Tạo một chương trình HTML và sử dụng “ flex-nowrap ” tiện ích với hộp chứa linh hoạt mong muốn để ngăn các vật phẩm linh hoạt bị gói:
< thân hình >
< div lớp học = 'flex flex-nowrap h-40' >
< div lớp học = 'cơ sở-1/4 bg-đỏ-500 m-1' > 1 < / div >
< div lớp học = 'cơ sở-1/3 bg-vàng-500 m-1' > 2 < / div >
< div lớp học = 'cơ sở-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / thân hình >
Đây:
- “ uốn cong ” lớp cho phép bố trí flexbox trên phần tử và cho phép các phần tử con được sắp xếp và căn chỉnh.
- “ flex-nowrap ” lớp chỉ định rằng các mục flex không được bao bọc trên nhiều dòng và giữ tất cả các mục flex trong một dòng.
- Các ' cơ sở-1/4 ”, “ cơ sở-1/3 ', Và ' cơ sở-1/2 ” các lớp thiết lập bên trong
’s width thành 25%, 33,33% và 50% của các phần tử cha của chúng, tương ứng.
Bước 2: Xác minh đầu ra
Để đảm bảo rằng các mục linh hoạt chưa được bao bọc, hãy xem trang web HTML:
Trong trang web trên, các mục linh hoạt nằm trong một dòng và chưa được bao bọc.
Phần kết luận
Để ngăn các mục linh hoạt gói trong Tailwind, hãy sử dụng tiện ích “flex-nowrap” với bộ chứa flex mong muốn trong chương trình HTML. Tiện ích này ngăn không cho các mục linh hoạt bị gói. Để xác minh, hãy xem các thay đổi trên trang web. Bài viết này đã minh họa phương pháp ngăn các mục linh hoạt gói trong Tailwind CSS.