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.
Tôi là nhà sáng lập Kênh Tin Học – Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.
Latest posts by Trần Thành (see all)
- [Hỏi đáp] PC Gaming đang chơi thì bị đơ, chớp, sọc dưa màn hình – 04/10/2024
- Bảng xếp hạng card đồ họa – 30/09/2024
- AMD hay NVIDIA? Nên chọn card nào để build PC Gaming? – 30/09/2024
Leave a Reply