Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .main { display: flex; height: 100px; border: 1px solid #c3c3c3; } .main div { flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } .main div:nth-of-type(2) { flex-basis: 80px; } .main div:nth-of-type(4) { flex-basis: 60px; } </style> </head> <body> <h1>Die Eigenschaft flex-basis</h1> <p>Stellen Sie die Anfangslänge der Flex-Items auf 40 Pixel, mit einer Ausnahme ein; stellen Sie die Anfangslänge des zweiten Flex-Items auf 100 Pixel ein:</p> <div class="main"> <div style="background-color:red;">40px</div> <div style="background-color:#1c87c9;">80px</div> <div style="background-color:yellow;">40px</div> <div style="background-color:#8ebf42;">60px</div> <div style="background-color:lightgrey;">40px</div> </div> </body> </html>