HTML Simple Flexbox Layout
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Flexbox Layout</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11.  
  12. body {
  13. margin: 0;
  14. font-family: Arial, sans-serif;
  15. color: #333;
  16. }
  17.  
  18. .page {
  19. display: flex;
  20. flex-direction: column;
  21. min-height: 100vh;
  22. }
  23.  
  24. .site-header {
  25. background: #4caf50;
  26. padding: 20px;
  27. text-align: center;
  28. font-weight: bold;
  29. }
  30.  
  31. .main-nav {
  32. background: #ffeb3b;
  33. padding: 15px;
  34. text-align: center;
  35. font-weight: bold;
  36. }
  37.  
  38. .content-wrap {
  39. display: flex;
  40. flex: 1;
  41. }
  42.  
  43. .sidebar {
  44. background: #ff9800;
  45. width: 25%;
  46. padding: 20px;
  47. font-weight: bold;
  48. }
  49.  
  50. .content {
  51. background: #90caf9;
  52. flex: 1;
  53. padding: 20px;
  54. font-weight: bold;
  55. }
  56.  
  57. .site-footer {
  58. background: #e57373;
  59. padding: 20px;
  60. text-align: center;
  61. font-weight: bold;
  62. }
  63.  
  64. @media (max-width: 600px) {
  65. .content-wrap {
  66. flex-direction: column;
  67. }
  68.  
  69. .sidebar {
  70. width: 100%;
  71. }
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <div class="page">
  77. <header class="site-header">
  78. <h1>Header</h1>
  79. </header>
  80.  
  81. <nav class="main-nav" aria-label="Main navigation">
  82. Navigation
  83. </nav>
  84.  
  85. <div class="content-wrap">
  86. <aside class="sidebar">
  87. <h2>Aside</h2>
  88. </aside>
  89.  
  90. <main class="content">
  91. <h2>Main Content</h2>
  92. </main>
  93. </div>
  94.  
  95. <footer class="site-footer">
  96. Footer
  97. </footer>
  98. </div>
  99. </body>
  100. </html>
Pasted 2026-09-22 06:55:59

Short link:

VicePaste is a public paste platform.

Login or Register to edit, delete and keep track of your pastes and more.

Recent Public Pastes
FAQS Contact
Copyright © 1986-2026 VicePaste. All rights reserved.