Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> .box { width: 300px; height: 80px; border: 1px solid #666; display: -webkit-flex; /* Safari */ display: flex; } .box div { -webkit-flex-grow: 0; /* Safari 6.1+ */ -webkit-flex-shrink: 0; /* Safari 6.1+ */ -webkit-flex-basis: 50px; /* Safari 6.1+ */ flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } .box div:nth-of-type(2) { -webkit-flex-basis: 150px; /* Safari 6.1+ */ flex-basis: 140px; } </style> </head> <body> <h2>Пример свойства flex-basis</h2> <div class="box"> <div style="background-color: #eee;">40px</div> <div style="background-color: #1c87c9;">140px</div> <div style="background-color: #8ebf42;">40px</div> <div style="background-color: #ccc;">40px</div> <div style="background-color: #666;">40px</div> </div> </body> </html>