Bài viết này sẽ giải thích phương pháp đặt cơ sở uốn trong CSS Tailwind.
Cách đặt Cơ sở linh hoạt trong Tailwind?
Để đặt cơ sở linh hoạt trong Tailwind CSS, hãy tạo một tệp HTML. Sau đó, sử dụng “ cơ sở-
Xem các bước được cung cấp sẵn để minh họa thực tế:
Bước 1: Đặt Cơ sở Flex trong Chương trình HTML
Tạo một chương trình HTML và sử dụng “ cơ sở-
< thân hình >
< div lớp học = 'flex h-20' >
< div lớp học = 'cơ sở-1/4 bg-đỏ-400 m-1' > 1 < / div >
< div lớp học = 'cơ sở-1/3 bg-teal-400 m-1' > 2 < / div >
< div lớp học = 'cơ sở-1/2 bg-cam-400 m-1' > 3 < / div >
< / div >
< / thân hình >
Đây:
- “ uốn cong ” lớp được sử dụng để tạo bố cục linh hoạt và điều chỉnh kích thước của phần tử con dựa trên không gian có sẵn.
- “ h-20 ” lớp đặt chiều cao của thành 20 đơn vị.
- “ cơ sở-1/4 ” lớp đặt chiều rộng của phần tử
bên trong thành 25% phần tử cha của nó.- “ cơ sở-1/3 ” lớp đặt chiều rộng của
bên trong thành 33,33% vùng chứa chính của nó.- “ cơ sở-1/2 ” đặt chiều rộng của
thành 50% vùng chứa chính của nó.- “ bg-đỏ-400 ” áp dụng màu nền đỏ cho
.- “ bg-teal-400 ” đặt màu xanh mòng két cho nền của
.- “ bg-cam-400 ” áp dụng màu nền cam cho
.- “ m-1 ” lớp thêm lề 1 đơn vị xung quanh mỗi phần tử
.Bước 2: Xác minh đầu ra
Để đảm bảo rằng cơ sở linh hoạt đã được đặt và hoạt động bình thường, hãy xem trang web HTML:
Trong kết quả đầu ra ở trên, có thể thấy cơ sở flex theo đó chúng được tạo kiểu.
Phần kết luận
Cơ sở linh hoạt cho phép người dùng tạo bố cục linh hoạt điều chỉnh theo các kích thước và độ phân giải màn hình khác nhau. Để đặt cơ sở linh hoạt trong Tailwind CSS, hãy chọn “ cơ sở-
” lớp tiện ích được sử dụng trong chương trình HTML. Người dùng cần chỉ định kích thước mục linh hoạt và đảm bảo các thay đổi bằng cách xem trang web. Bài viết này đã giải thích phương pháp đặt cơ sở linh hoạt trong Tailwind CSS. - “ cơ sở-1/4 ” lớp đặt chiều rộng của phần tử