Bài viết này sẽ minh họa phương pháp ngăn các mục linh hoạt phát triển hoặc thu nhỏ trong Tailwind CSS.
Làm cách nào để ngăn các vật phẩm linh hoạt phát triển hoặc thu hẹp trong Tailwind?
Để ngăn các mục flex phát triển và thu nhỏ trong Tailwind, hãy tạo tệp HTML. Sau đó, sử dụng “ flex-grow-0 ' Và ' flex-co-0 ” tiện ích với các mục linh hoạt cụ thể trong chương trình HTML. Các tiện ích này không cho phép các mục linh hoạt tăng hoặc giảm theo không gian trong bộ chứa linh hoạt. Sau đó, điều chỉnh kích thước màn hình của trang web HTML để đảm bảo thay đổi.
Thực hiện theo các bước được cung cấp để triển khai thực tế:
Bước 1: Ngăn chặn các mục linh hoạt phát triển và thu hẹp trong chương trình HTML
Tạo một chương trình HTML và sử dụng “ flex-grow-0 ' Và ' flex-co-0 ” tiện ích với các mục linh hoạt mong muốn để ngăn chúng phát triển hoặc co lại:
< thân hình >
< div lớp học = 'flex h-20' >
< div lớp học = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div lớp học = 'flex-co-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div lớp học = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div lớp học = 'flex-co bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / thân hình >
Đây:
- “ flex-grow-0 ” ngăn không cho vật phẩm linh hoạt phát triển và chiếm thêm không gian trong bộ chứa linh hoạt khi có sẵn dung lượng.
- “ flex-co-0 ” ngăn không cho vật phẩm linh hoạt co lại và nhỏ lại trong bộ chứa linh hoạt khi không đủ dung lượng.
- “ uốn cong ” lớp cho phép mục linh hoạt phát triển và chiếm không gian có sẵn trong bộ chứa flex.
- “ uốn cong ” lớp cho phép mục flex co lại nếu không có đủ dung lượng trong bộ chứa flex.
Bước 2: Xác minh đầu ra
Xem trang web HTML và thay đổi kích thước màn hình để đảm bảo rằng các mục linh hoạt mong muốn đã được ngăn không cho phát triển và thu nhỏ:
Đầu ra ở trên cho thấy rằng mục linh hoạt “2” không bị thu hẹp trong không gian không đủ và mục “1” không phát triển trong không gian có sẵn. Điều này chỉ ra rằng các mục linh hoạt mong muốn đã bị ngăn không cho phát triển và thu hẹp.
Phần kết luận
Để ngăn các mục linh hoạt phát triển và thu nhỏ lại trong Tailwind, hãy sử dụng “ flex-grow-0 ' Và ' flex-co-0 ” tiện ích với các mục linh hoạt mong muốn trong chương trình HTML. Để xác minh, hãy thay đổi và xem kích thước màn hình của trang web HTML. Bài viết này minh họa phương pháp ngăn các mục linh hoạt phát triển hoặc thu nhỏ trong Tailwind CSS.