Bài viết này sẽ minh họa phương pháp sắp xếp các mục flex và grid trong Tailwind CSS.
Làm cách nào để đặt mua các mặt hàng Flex và Grid trong Tailwind?
Để sắp xếp các mục flex và grid trong Tailwind CSS, hãy tạo một tệp HTML. Sau đó, sử dụng tiện ích “đặt hàng-” và chỉ định giá trị đặt hàng trong chương trình HTML để thay đổi thứ tự của các mục flex và grid. Nó cho phép các mục linh hoạt được hiển thị theo thứ tự khác với thứ tự chúng hiển thị trong DOM (Mô hình đối tượng tài liệu). Để đảm bảo thay đổi, hãy xem trang web HTML.
Xem các bước được cung cấp sẵn để hiểu rõ hơn:
Bước 1: Đặt hàng các mục Flex và Grid trong Chương trình HTML
Tạo một chương trình HTML và sử dụng “ đặt hàng-
< thân hình >
< div lớp học = 'flex h-20' >
< div lớp học = 'đơn hàng-3 bg-đỏ-500 w-32 m-1' > 1 < / div >
< div lớp học = 'đơn hàng cuối cùng bg-vàng-500 w-32 m-1' > 2 < / div >
< div lớp học = 'đặt hàng đầu tiên bg-teal-500 w-32 m-1' > 3 < / div >
< div lớp học = 'đơn hàng-2 bg-cam-500 w-32 m-1' > 4 < / div >
< / div >
< / thân hình >
Đây:
- “ đặt hàng-3 ” lớp đặt thứ tự của phần tử thành 3 và mục flex sẽ được định vị là mục thứ ba trong bộ chứa flex.
- “ đặt hàng cuối cùng ” lớp đặt thứ tự của phần tử là phần tử cuối cùng và nó sẽ là phần tử cuối cùng trong bộ chứa flex.
- “ đặt hàng đầu tiên ” lớp chỉ định thứ tự của phần tử là đầu tiên và nó sẽ được định vị là mục đầu tiên trong bộ chứa flex.
- “ đặt hàng-2 ” lớp đặt thứ tự của phần tử thành 2 và nó sẽ được định vị là mục thứ hai trong bộ chứa flex.
- “ w-32 ” lớp áp dụng 32 đơn vị chiều rộng cho mỗi mục linh hoạt.
- “ m-1 ” lớp thêm 1 lề đơn vị xung quanh mỗi mục linh hoạt.
Bước 2: Xác minh đầu ra
Xem trang web HTML để đảm bảo rằng các mục flex và grid đã được sắp xếp:
Có thể thấy rằng các mục flex và grid đã được sắp xếp thành công theo thứ tự mà chúng được chỉ định.
Phần kết luận
Để sắp xếp các mục flex và grid trong Tailwind CSS, hãy sử dụng “ thứ tự-