flex-grow
Bài học 14 trên 15 trong khóa học CSS Flexbox: khóa học đầy đủ của Coddy.
Thuộc tính flex-grow xác định khả năng tăng kích thước của một mục flex khi cần thiết.
Thuộc tính này nhận một số làm tỷ lệ.
Nếu tất cả các mục đều đặt flex-grow thành 1, phần không gian còn lại trong vùng chứa sẽ được chia đều cho tất cả các mục con. Nếu một mục con có giá trị 2, mục đó sẽ chiếm không gian gấp đôi so với mỗi mục còn lại.
Ví dụ:
.item {
flex-grow: 4;
}Giá trị mặc định là 0, số âm không hợp lệ.
Thử thách
DễBạn có một flexbox gồm ba mục flex. Hãy làm cho mục flex ở giữa phát triển gấp đôi hai mục ở hai bên.
Bạn nên đặt thuộc tính
flex-growcho tất cả các mục.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>Tất cả bài học trong CSS Flexbox: khóa học đầy đủ
Tự luyện tập: Playground Web