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; } .item { background-color: lightsalmon; border: 1px solid black; text-align: center; margin: 10px 2px; padding: 10px; /* Szerokość pojedynczego elementu ustawiamy na 50% szerokości kontenera. Ponieważ mamy więcej niż dwa elementy w każdym kontenerze, flex musi zmniejszać swoje dzieci, aby utrzymać je w jednej linii bez wychodzenia poza kontener. */ width: 50%; } </style> </head> <body> <h1>"flex-shrink" dla różnych wartości:</h1> <div class="container with-flex"> <!-- Domyślna wartość "flex-shrink" wynosi 1 --> <div class="item">shrink: 1</div> <div class="item">shrink: 1</div> <div class="item">shrink: 1</div> <div class="item">shrink: 1</div> <div class="item">shrink: 1</div> </div> <div class="container with-flex"> <div class="item">shrink: 1</div> <!-- Poniższy element będzie dwukrotnie bardziej narażony na "ściskanie" elementów w jednej linii. --> <div class="item" style="flex-shrink: 2">shrink: 2</div> <!-- Poniższy element będzie trzykrotnie bardziej narażony na "ściskanie" elementów w jednej linii. --> <div class="item" style="flex-shrink: 3">shrink: 3</div> <div class="item">shrink: 1</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.