Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; } .row { display: flex; align-items: flex-start; gap: 12px; height: 160px; background: #f1f5f9; padding: 16px; border-radius: 8px; margin-bottom: 24px; } .it { padding: 12px 16px; color: white; border-radius: 6px; } .a { background: #6366f1; align-self: flex-start; } .b { background: #10b981; align-self: center; } .c { background: #f59e0b; align-self: flex-end; } .d { background: #ec4899; align-self: stretch; } .order-row { display: flex; gap: 12px; } .ord { padding: 12px 20px; background: #8b5cf6; color: white; border-radius: 6px; } .ord.first { order: -1; background: #ef4444; } </style> </head> <body> <h3>align-self</h3> <div class="row"> <div class="it a">start</div> <div class="it b">center</div> <div class="it c">end</div> <div class="it d">stretch</div> </div> <h3>order (-1 = first)</h3> <div class="order-row"> <div class="ord">A</div> <div class="ord">B</div> <div class="ord">C</div> <div class="ord first">D (order:-1)</div> </div> </body> </html>
Result
Open