Live
x
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Flex</title> <style> * { font-family: sans-serif; box-sizing: border-box; } .container { border: 4px dashed blue; padding: 10px; margin: 20px 10px; height: 200px; } .with-flex { display: flex; align-items: center; } .item { background-color: lightsalmon; border: 1px solid black; text-align: center; margin: 10px 2px; padding: 10px; height: 50px; } </style> </head> <body> <code>.container { align-items: center }</code> <div class="container with-flex"> <!-- Domyślna wartość to "auto" --> <div class="item" style="align-self: auto">auto</div> <div class="item" style="align-self: flex-start">flex-start</div> <div class="item">auto</div> <div class="item">auto</div> <div class="item" style="align-self: flex-end">flex-end</div> <div class="item" style="align-self: auto">auto</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.