Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .main { display: flex; width: 90%; height: 150px; background: #c3c3c3; } .main div { width: 15%; height: 50px; } div.item-blue { flex-grow: 2; } div.item-yellow { flex-grow: 1; } div.item-red { flex-grow: 4; } div.item-green { flex-grow: 1; } /* Changez les chiffres pour voir comment les éléments grandissent */ </style> </head> <body> <h1>La propriété flex-grow</h1> <div class="main"> <div style="background-color:#1c87c9;" class="item-blue"></div> <div style="background-color:yellow;" class="item-yellow"></div> <div style="background-color:red;" class="item-red"></div> <div style="background-color:#8ebf42;" class="item-green"></div> </div> </body> </html>