kết thúc chiến đấu

Rap battle (hoặc battle rap ) là một kiểu biểu diễn rap trong đó hai hoặc nhiều rapper hát với nhau (thường bao gồm một số lời lăng mạ/công kích). Truyện tranh ngày nay sử dụng các từ đồng âm Rap và Wrap để tạo ra một trò đùa ngớ ngẩn với Flexbox và flex-wraptài sản .

Theo mặc định, một bộ chứa flex sẽ bố trí nội dung trong một dòng. Điều này có thể ổn, nhưng nếu kích thước của các mặt hàng vượt quá thùng chứa, chúng sẽ bị nén hoặc tràn ra ngoài. Vì vậy, thay vào đó, chúng ta có thể muốn lấy nội dung thành nhiều dòng. Đây là nơi flex-wrapbắt đầu hành động.

Thuộc tính này xác định xem một thùng chứa flex sẽ là một dòng hay nhiều dòng (tùy thuộc vào số lượng và kích thước của các mục flex) và trong trường hợp nhiều dòng, thuộc tính này xác định cách các mục sẽ được xếp chồng lên nhau sau khi gói.

flex-wrapcó ba giá trị chính:

• nowrap: các mục sẽ không bọc; thay vào đó, chúng sẽ điều chỉnh kích thước của chúng hoặc làm tràn cha mẹ. (Đây là giá trị mặc định.)
• wrap: các mục sẽ bọc thay vì tràn hộp chứa flex. Chúng sẽ xếp chồng lên nhau từ đầu đến cuối.
• wrap-reverse: các mục sẽ bọc thay vì tràn hộp chứa flex. Chúng sẽ xếp chồng lên nhau từ đầu cuối đến đầu cuối.

Hãy kiểm tra một ví dụ với hộp chứa linh hoạt có 5 mục có chiều rộng xác định. Theo mặc định, giá trị của flex-wraplà "nowrap", vì vậy các mục flex sẽ tràn vào vùng chứa (tôi đặt nó dưới dạng hình ảnh để tránh tràn theo chiều ngang khó chịu mà nó sẽ tạo ra):

Bây giờ, nếu chúng ta thay đổi mã để đặt giá trị “quấn” cho flex-wrap, khi các mục linh hoạt sẽ tràn ra vùng chứa, thay vào đó, chúng sẽ bọc thành một hàng mới (bản demo trực tiếp):

Nhưng nếu chúng ta đặt flex-wrapthành "quấn ngược", thì hướng bao bọc sẽ ngược lại: thay vì chuyển sang một hàng mới, các phần tử được bao bọc sẽ đẩy các phần tử khác vào một hàng mới.

Một ví dụ cuối cùng với tập flex-directionhợp thành "cột". Trong trường hợp này, các phần tử sắp xếp theo chiều dọc trong các cột, vì vậy khi chúng bao bọc, chúng thực hiện theo cột thay vì hàng:

Tôi hy vọng những ví dụ này hữu ích và bạn thích truyện tranh hôm nay . Tìm hiểu thêm về flex-wrapcác nguồn sau:

• Bài viết MDN về flex-quấn
• Thủ thuật CSS: Hướng dẫn đầy đủ về Flexbox
• Josh W Comeau: Hướng dẫn tương tác về Flexbox