Live
x
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Flex</title> <style> body { font-family: sans-serif; } .container { border: 4px dashed blue; padding: 10px; margin: 20px 10px; } .with-flex { display: flex; } .with-grow div { flex-grow: 1; } .item { background-color: lightsalmon; border: 1px solid black; text-align: center; margin: 10px 2px; padding: 10px; } </style> </head> <body> <h1>"flex-grow" dla różnych wartości:</h1> <div class="container with-flex"> <div class="item">grow: 0</div> <div class="item">grow: 0</div> <div class="item">grow: 0</div> <div class="item">grow: 0</div> <div class="item">grow: 0</div> </div> <div class="container with-flex with-grow"> <div class="item">grow: 1</div> <div class="item">grow: 1</div> <div class="item">grow: 1</div> <div class="item">grow: 1</div> <div class="item">grow: 1</div> </div> <div class="container with-flex"> <div class="item">grow: 0</div> <!-- W przypadku gdy tylko jeden element posiada ustawioną własciwość "flex-grow", to niezależnie od jej wartości zajmuje całą wolną przestrzeń. --> <div class="item" style="flex-grow: 1">grow: 1</div> <div class="item">grow: 0</div> <div class="item">grow: 0</div> <div class="item">grow: 0</div> </div> <div class="container with-flex with-grow"> <div class="item">grow: 1</div> <!-- Poniższy element będzie trzykrotnie szerszy niż pozostałe --> <div class="item" style="flex-grow: 3">grow: 3</div> <div class="item">grow: 1</div> <div class="item" style="flex-grow: 0">grow: 0</div> <div class="item">grow: 1</div> </div> <div class="container with-flex with-grow"> <div class="item">grow: 1</div> <!-- Poniższy element będzie trzykrotnie szerszy niż pozostałe --> <div class="item" style="flex-grow: 2">grow: 2</div> <div class="item" style="flex-grow: 3">grow: 3</div> <div class="item">grow: 1</div> <div class="item" style="flex-grow: 4">grow: 4</div> </div> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.