Home
CSS
CSS Templates
Tryit: Template 2 - using flexbox
Run ❯
Get your
own
website
Result Size:
625 x 534
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ .header { background-color: #f1f1f1; padding: 30px; text-align: center; font-size: 35px; } /* Container for flexboxes */ .row { display: -webkit-flex; display: flex; } /* Create three unequal columns that sits next to each other */ .column { padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } /* Left and right column */ .column.side { -webkit-flex: 1; -ms-flex: 1; flex: 1; } /* Middle column */ .column.middle { -webkit-flex: 2; -ms-flex: 2; flex: 2; } /* Style the footer */ .footer { background-color: #f1f1f1; padding: 10px; text-align: center; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media (max-width: 600px) { .row { -webkit-flex-direction: column; flex-direction: column; } } </style> </head> <body> <h2>CSS Template using Flexbox</h2> <p>In this example, we have created a header, three unequal columns and a footer. On smaller screens, the columns will stack on top of each other. Resize the browser window to see the responsive effect.</p> <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p> <div class="header"> <h2>Header</h2> </div> <div class="row"> <div class="column side" style="background-color:#aaa;">Column</div> <div class="column middle" style="background-color:#bbb;">Column</div> <div class="column side" style="background-color:#ccc;">Column</div> </div> <div class="footer"> <p>Footer</p> </div> </body> </html>