Live
x
<html> <head> <title>Flex</title> <style> body { font-family: sans-serif; } .container { border: 4px dashed blue; padding: 10px; margin: 10px; /* Zmiana wysokości kontenera wpłynie na wysokość elementów położonych na osi pionowej. Sprawdź to, odkomentowując poniższą linię.*/ /* height: 200px; */ } .with-flex { display: flex; } .item { background-color: lightsalmon; border: 1px solid black; text-align: center; margin: 10px; padding: 10px; } </style> </head> <body> <code>flex-direction: row</code> <!-- W poniższych dwóch przypadkach główną osią jest oś pozioma. Dzieci wewnątrz kontenera będą zajmowały całą dostępną wysokość. --> <div class="container with-flex" style="flex-direction: row;"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <code>flex-direction: row-reverse</code> <div class="container with-flex" style="flex-direction: row-reverse;"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <code>flex-direction: column</code> <!-- W poniższych dwóch przypadkach główną osią jest oś pionowa. Dzieci wewnątrz kontenera będą zajmowały całą dostępną szerokość. --> <div class="container with-flex" style="flex-direction: column;"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <code>flex-direction: column-reverse</code> <div class="container with-flex" style="flex-direction: column-reverse"> <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.