Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .main { display: flex; height: 150px; background: #c3c3c3; } .main div { width: 10%; height: 50px; } div.item-blue { flex-grow: 1; } div.item-yellow { flex-grow: 1; } div.item-red { flex-shrink: 3; } div.item-green { flex-grow: 1; } /* Changez les nombres pour voir comment les articles se réduisent */ </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>