Thuộc tính flex-grow của phần tử Flex trong CSS
Giả sử hiện tại chúng ta có hai khối flex,
xếp thành một hàng. Các khối này được đặt chiều rộng
là 100px, còn phần tử cha - 300px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Như bạn thấy, tổng chiều rộng của các phần tử của chúng ta nhỏ hơn chiều rộng của phần tử cha, vì vậy bên phải vẫn còn không gian trống.
Nếu muốn, không gian trống này có thể được
chia tỷ lệ giữa các phần tử của chúng ta.
Điều này được thực hiện bằng thuộc tính flex-grow,
được áp dụng cho các phần tử flex. Giá trị của
thuộc tính này là một số không có đơn vị.
Hãy cùng xem trong thực tế, thuộc tính này hoạt động như thế nào.
Ví dụ
Hiện tại chúng ta có hai khối flex với chiều rộng là
100px. Tổng chiều rộng của các phần tử là
200px, còn chiều rộng của phần tử cha - 300px.
Kết quả là vẫn còn không gian trống
là 100px.
Nếu các phần tử không được đặt flex-grow,
thì chúng ta sẽ chỉ thấy không gian trống này.
Nếu nó được đặt cho chúng, thì chiều rộng thực tế của các phần tử
sẽ lớn hơn chiều rộng được đặt - chúng sẽ chia tỷ lệ
không gian trống giữa chúng
và thêm nó vào chiều rộng của mình.
Ví dụ, giả sử phần tử đầu tiên có flex-grow
bằng 1, còn phần tử thứ hai - 3. Hãy
tính toán, mỗi phần tử sẽ nhận được bao nhiêu phần
không gian trống.
Đầu tiên cần tính tổng số lượng
đơn vị flex-grow của tất cả các phần tử của chúng ta.
Phần tử đầu tiên bằng 1, và
phần tử thứ hai - 3. Điều này có nghĩa là tổng
của chúng bằng 4.
Bây giờ chia 100px không gian trống
cho 4 và nhận được rằng 25px tương ứng
với một đơn vị flex-grow. Kết quả là,
phần tử đầu tiên sẽ được thêm một đơn vị
flex-grow, tức là 25px, còn
phần tử thứ hai - ba đơn vị, tức
là 75px.
Chiều rộng của phần tử đầu tiên sẽ là 125px,
còn phần tử thứ hai - 175px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 3;
}
:
Ví dụ
Giả sử bây giờ chiều rộng của phần tử cha bằng 400px,
chiều rộng của phần tử đầu tiên là 200px, còn chiều rộng
của phần tử thứ hai - 100px. Kết quả là,
không gian trống lại
bằng 100px.
Hãy đặt flex-grow cho mỗi phần tử,
bằng 1. Tổng sẽ là 2,
tức là 100px không gian trống
cần chia cho 2. Kết quả là,
50px tương ứng với một
đơn vị flex-grow.
Vì tất cả các phần tử có cùng giá trị
flex-grow, nên tất cả các phần tử sẽ được thêm
cùng một giá trị là 50px. Điều này có nghĩa là,
phần tử đầu tiên sẽ trở thành 250px, và
phần tử thứ hai sẽ trở thành 150px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
Ví dụ
Giả sử lại chiều rộng của phần tử cha bằng 400px,
chiều rộng của phần tử đầu tiên là 200px, còn chiều rộng
của phần tử thứ hai - 100px.
Bây giờ hãy đặt cho phần tử đầu tiên
flex-grow có giá trị 3, còn phần tử thứ hai
- giá trị 1. Kết quả là, tổng flex-grow
bằng 4. Khi đó một đơn vị
flex-grow bằng 100px / 4 = 25px
Phần tử đầu tiên sẽ được thêm 75px,
và nó sẽ trở thành 275px, còn phần tử thứ hai -
25px, nó sẽ trở thành 125px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
:
Bài tập thực hành
Trong tất cả các bài tập dưới đây, bạn sẽ được cung cấp
một số mã với các phần tử flex, có
chiều rộng và flex-grow. Dựa trên mã được cung cấp,
hãy tính toán kích thước mà mỗi phần tử sẽ có.
Sau đó chạy mã
và kiểm tra tính toán của bạn bằng cách đo chiều rộng thực tế
của các phần tử.
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 3;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
