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: 10px; } .with-flex { display: flex; } .item { background-color: lightsalmon; border: 1px solid black; text-align: center; margin: 10px; padding: 10px; } </style> </head> <body> <code>align-items: flex-start</code> <div class="container with-flex" style="align-items: flex-start"> <div class="item" style="height: 100px">Item 1</div> <div class="item" style="height: 20px">Item 2</div> <div class="item" style="height: 50px">Item 3</div> <div class="item" style="height: 120px">Item 4</div> <div class="item" style="height: 100px">Item 5</div> </div> <code>align-items: flex-end</code> <div class="container with-flex" style="align-items: flex-end"> <div class="item" style="height: 100px">Item 1</div> <div class="item" style="height: 20px">Item 2</div> <div class="item" style="height: 50px">Item 3</div> <div class="item" style="height: 120px">Item 4</div> <div class="item" style="height: 100px">Item 5</div> </div> <code>align-items: center</code> <div class="container with-flex" style="align-items: center"> <div class="item" style="height: 100px">Item 1</div> <div class="item" style="height: 20px">Item 2</div> <div class="item" style="height: 50px">Item 3</div> <div class="item" style="height: 120px">Item 4</div> <div class="item" style="height: 100px">Item 5</div> </div> <code>align-items: stretch</code> <div class="container with-flex" style="align-items: stretch; height: 200px" > <!-- Ustawienie właściwości "height" uniemożliwi rozciągnięcie elementu, dlatego został on zabrany z elementów w tym przypadku. --> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> <code>align-items: baseline</code> <!-- W dwóch elementach "item" przesunęliśmy tekst nieco niżej, aby można było zobaczyć, iż elementy wyrównują się do swoich tekstów. --> <div class="container with-flex" style="align-items: baseline"> <div class="item" style="height: 100px; padding-top: 30px">Item 1</div> <div class="item" style="height: 20px">Item 2</div> <div class="item" style="height: 50px; padding-top: 40px">Item 3</div> <div class="item" style="height: 120px">Item 4</div> <div class="item" style="height: 100px">Item 5</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.