Tính tham lam khi chỉ định chiều rộng của các khối flex trong CSS
Giả sử chúng ta có một số khối flex.
Hãy đặt flex-grow
với giá trị 1 cho một trong các khối này,
còn tất cả các phần tử khác
- một chiều rộng nhất định. Kết quả sẽ là,
tất cả các khối sẽ có chiều rộng cố định,
và khối tham lam được chọn của chúng ta sẽ chiếm
tất cả không gian có sẵn còn lại:
<div class="parent">
<div class="child elem1"></div>
<div class="child elem2"></div>
<div class="child elem3"></div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
flex-grow: 1;
}
.elem3 {
width: 100px;
}
:
Hiệu ứng đặc trưng đặc biệt rõ ràng khi chiều rộng của phần tử cha tính bằng phần trăm. Trong trường hợp này, khi thay đổi chiều rộng của phần tử cha, khối tham lam của chúng ta sẽ có chiều rộng thay đổi, còn tất cả các khối khác - chiều rộng cố định:
