Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <head> <title>Responsive Flexbox Example</title> <style> body { font-family: sans-serif; margin: 20px; background-color: #f0f2f5; } .flex-container { display: flex; flex-direction: row; /* Default: columns side-by-side */ gap: 20px; } .box { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1; /* Make all boxes equal width */ } /* When the screen is 600px or less, stack the boxes */ @media (max-width: 600px) { .flex-container { flex-direction: column; } } </style> </head> <body> <h3>Responsive Flexbox Grid</h3> <p>Resize your browser window to see the layout switch from horizontal to vertical.</p> <div class="flex-container"> <div class="box"> <h4>Column 1</h4> <p>This is the first column. Flexbox makes it very easy to align and distribute space.</p> </div> <div class="box"> <h4>Column 2</h4> <p>This is the second column. It will sit side-by-side with the others on large screens.</p> </div> <div class="box"> <h4>Column 3</h4> <p>This is the third column. On mobile devices, this layout will stack cleanly into a single column.</p> </div> </div> </body> </html>
