Live Demo: Example of CSS3 flex-grow Property

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 flex-grow Property</title>
<style>
    .flex-container {
        width: 300px;
        height: 200px;
        font-size: 32px;
        border: 1px solid black;
        display: -webkit-flex; /* Safari */     
        display: flex; /* Standard syntax */
    }
    .item1 {
        width: 50px;
        background: #e84d51;
        -webkit-flex-grow: 1; /* Safari */
        flex-grow: 1;
    }
    .item2 {
        width: 50px;
        background: #7ed636;
        -webkit-flex-grow: 2; /* Safari */
        flex-grow: 2;
    }
    .item3 {
        width: 50px;
        background: #2f97ff;
        -webkit-flex-grow: 3; /* Safari */
        flex-grow: 3;
    }
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>