Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> .box { width: 320px; height: 120px; border: 1px solid #666; display: -webkit-flex; /* Safari */ display: flex; } .box div { -webkit-flex-grow: 1; /* Safari 6.1+ */ -webkit-flex-shrink: 2; /* Safari 6.1+ */ -webkit-flex-basis: 100px; /* Safari 6.1+ */ flex-grow: 1; flex-shrink: 2; flex-basis: 100px; } .box div:nth-of-type(2) { -webkit-flex-shrink: 5; /* Safari 6.1+ */ flex-shrink: 5; } </style> </head> <body> <h2>Beispiel für flex-shrink</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>