Flexbox hoặc flex container là một bố cục cho phép người dùng căn chỉnh và phân phối các thành phần bên trong một container. Tailwind CSS cung cấp nhiều lớp tiện ích khác nhau để tạo và làm việc với flexbox. Bộ chứa flex cấp hộp là bộ chứa flex hoạt động/hoạt động giống như phần tử cấp khối và tạo khối. Nó chiếm toàn bộ chiều rộng của phần tử gốc và tạo một dòng mới sau chính nó.
Bài viết này sẽ minh họa phương pháp tạo bộ chứa flex cấp khối trong Tailwind.
Cách tạo/Tạo bộ chứa linh hoạt cấp khối trong Tailwind?
Để tạo một bộ chứa flex cấp khối cụ thể trong Tailwind, hãy tạo một cấu trúc HTML. Sau đó, thêm “ uốn cong ” lớp tiện ích với
cú pháp
< div lớp học = 'uốn cong ...' >
...
div >
Mã số
< thân hình >
< div lớp học = 'flex gap-2 m-2 viền-2 viền-đen' >
< div lớp học = 'bg-vàng-500 p-4' > Mục đầu tiên div >
< div lớp học = 'bg-vàng-500 p-4' > Mục thứ hai div >
< div lớp học = 'bg-vàng-500 p-4' > Mục thứ ba div >
div >
thân hình >
Ở đây, trong bộ chứa
-
- “ uốn cong ” lớp được sử dụng để tạo một thùng chứa flex cấp khối.
- “ khoảng cách-2 ” lớp thêm 2 đơn vị khoảng cách giữa các phần tử con của flex.
- “ m-2 ” lớp thêm 2 đơn vị lề vào tất cả các mặt của vùng chứa.
- “ biên giới-2 ” lớp thêm đường viền vào vùng chứa với chiều rộng 2 đơn vị.
- “ viền đen ” đặt màu đường viền thành màu đen.
Trong các phần tử flex con:
-
- “ bg-vàng-500 ” lớp áp dụng màu vàng cho nền của mục linh hoạt.
- “ p-4 ” lớp thêm phần đệm 4 đơn vị vào tất cả các mặt của các mục linh hoạt.
đầu ra
Trong đầu ra ở trên, đường viền biểu thị rằng vùng chứa là vùng chứa flex cấp khối, chiếm toàn bộ chiều rộng của phần tử cha (trình duyệt) của nó.
Ngoài ra, người dùng có thể đảm bảo điều này bằng cách kiểm tra phần tử bộ chứa flex trên trang web:
Đầu ra ở trên chỉ ra rằng vùng chứa là vùng chứa flex cấp khối.
Phần kết luận:
Để tạo bộ chứa flex cấp khối trong Tailwind, bạn phải thêm “ uốn cong ” lớp tiện ích với vùng chứa cụ thể và chỉ định các phần tử con của nó. Người dùng có thể xác định và sửa đổi các mục linh hoạt theo nhu cầu của họ. Để xác minh, hãy thêm đường viền vào vùng chứa và xem trang web hoặc kiểm tra phần tử đó trên trang web. Bài viết này đã giải thích phương pháp tạo bộ chứa flex cấp khối trong Tailwind.