Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .box { width: 320px; height: 120px; border: 1px solid #666; display: -webkit-flex; /* Safari */ display: flex; } /* Safari 6.1+ */ .box div:nth-of-type(1) { -webkit-flex-grow: 1; } .box div:nth-of-type(2) { -webkit-flex-grow: 4; } .box div:nth-of-type(3) { -webkit-flex-grow: 1; } .box div:nth-of-type(4) { -webkit-flex-grow: 1; } .box div:nth-of-type(5) { -webkit-flex-grow: 1; } /* Standard syntax */ .box div:nth-of-type(1) { flex-grow: 1; } .box div:nth-of-type(2) { flex-grow: 4; } .box div:nth-of-type(3) { flex-grow: 1; } .box div:nth-of-type(4) { flex-grow: 1; } .box div:nth-of-type(5) { flex-grow: 1; } </style> </head> <body> <h2>Flex-grow example</h2> <div class="box"> <div style="background-color: #eee;"></div> <div style="background-color: #1c87c9;"></div> <div style="background-color: #8ebf42;"></div> <div style="background-color: #ccc;"></div> <div style="background-color: #666;"></div> </div> </body> </html>