Thuộc tính flex-wrap – Ép đóng hộp flex

Thuộc tính flex-wrap giúp hỗ trợ cho thuộc tính chia cột display flex. Cụ thể là các mục sẽ bị ép phải xuống dòng khi kích thước chạm tới ngưỡng tối đa.

Ví dụ:

– Bạn xài thuộc tính display flex để chia cột, sau quy định chiều rộng tối đa là 1000px (width:1000px;).

– Bây giờ bạn có 10 mục (item), mỗi mục rộng 200px, vậy tổng tới 2000px lận. Lúc này nó sẽ nằm trên cùng một hàng và tràn ra ngoài kích thước quy định (container) luôn.

– Để giải quyết, bạn chỉ cần xài thuộc tính flex-wrap và gán giá trị là wrap. Khi chạm 1000px nó sẽ tự xuống dòng, trong trường hợp này là 2 dòng.

.class{
    display: flex;
    width: 550px;
    flex-wrap: wrap;
}

– Wrap: Có nghĩa là bọc, đóng gói, đóng hộp.

Leave a Comment