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; gap: 10px; margin: 12px 0; } .item { padding: 16px; color: white; border-radius: 6px; text-align: center; } .a { flex: 1; background: #6366f1; } .b { flex: 2; background: #10b981; } .c { flex: 1; background: #f59e0b; } .side { flex: 0 0 120px; background: #8b5cf6; } .main { flex: 1; background: #ec4899; } </style> </head> <body> <h3>Ratio (1:2:1)</h3> <div class="row"> <div class="item a">flex:1</div> <div class="item b">flex:2 (double)</div> <div class="item c">flex:1</div> </div> <h3>Sidebar Layout</h3> <div class="row"> <div class="item side">120px sidebar</div> <div class="item main">Flexible main</div> </div> </body> </html>
Result
Open