Code Thuộc tính flex-grow trong CSS

Code Thuộc tính flex-grow trong CSS

Code Thuộc tính flex-grow trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-grow trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{border:1px solid red; display: flex; width:100%; height:100px; margin-bottom:10px}
.divcha div {border:1px solid blue;}
</style>
</head>
<body>

<h1>Code Thuộc tính flex-grow trong CSS</h1>

<p>Dùng để lấy khoảng chiều rộng còn trống của phần tử cha chia cho các phần tử con, nếu các phần tử con có giá trị của thuộc tính flex-grow bằng nhau thì chiều rộng sẽ được chia bằng nhau, nếu có phần tử nào có giá trị lớn hơn thì sẽ được chia thêm 1 ít:</p>

<div class="divcha">
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 3;">flex-grow: 3;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
</div>

<div class="divcha">
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 2;">flex-grow: 2;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
</div>

<div class="divcha">
    <div style="flex-grow: 2;">flex-grow: 2;</div>
    <div style="flex-grow: 2;">flex-grow: 2;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div>
    <div style="flex-grow: 1;">flex-grow: 1;</div> 
</div>

</body>
</html>
Code Thuộc tính flex-grow trong CSS nằm trong bài viết Thuộc tính flex-grow trong CSS