Live
x
<html> <head> <title>Flex</title> <style> body { font-family: sans-serif; } code { display: block; } .container { border: 4px dashed blue; padding: 10px; margin: 10px; } /* Ustawienie kontenera flex. Wszystko co będziemy ustawiać na kontenerze będzie miało wpływ na to, jak będą wyświetlały oraz pozycjonowały się elementy wewnątrz tego kontenera - nie sam kontener! Domyślnie wszystkie dzieci będą wyświetlane liniowo jeden obok drugiego. */ .with-flex { display: flex; } /* Flex domyślnie zajmuje całą dostępną szerokość. Możemy użyć wartości "inline-flex" aby kontener zajmował tylko tyle ile potrzebują jego dzieci. */ .with-inline-flex { display: inline-flex; } .item { height: 30px; /* Flex domyślnie automatycznie zmienia wymiary swoich dzieci w taki sposób, aby nigdy nie wykroczyły poza kontener. Poniżej w zakomentowanych liniach CSS ustawiamy szerokość pojedynczego elementu na bardzo dużą wartość. Odkomentuj je jeden po drugim i zauważ, iż w przypadku kontenera flex, szerokosć elementów została ograniczona przez szerokość rodzica. */ /* width: 2000px; */ /* width: 100%; */ background-color: lightsalmon; border: 1px solid black; text-align: center; margin: 10px; padding: 10px; } </style> </head> <body> <code>display: block</code> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <code>display: flex</code> <div class="container with-flex"> <!-- Każdy element wewnątrz kontenra będzie ułożony wzdłuż głównej osi. Domyślnie, główną osią jest oś pozioma. --> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <code>display: inline-flex</code> <div class="container with-inline-flex"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</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.