Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; height: 250px; background-color: #f0f0f0; } .item { background-color: lightpink; padding: 20px; margin: 10px; border: 1px solid #ccc; } .item:nth-child(2) { align-self: center; /* Center 2nd item along the cross axis */ } .item:nth-child(3) { align-self: flex-end; /* Align 3rd item at the end of the cross axis */ } </style> </head> <body> <h1>Align Self Example</h1> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2 (Centered)</div> <div class="item">Item 3 (Aligned to End)</div> </div> </body> </html>