A Responsive Flexbox Layout

0
598
Flexbox

Get ready to have some fun! Here I look at how to create a responsive flexbox layout with HTML 5 and CSS 3.

Although not official, FlexBox is available and supported in all the browsers today. What’s so great about it? No longer do you have to perform tricks to make equal column height layouts. Floated divs go away. Structures can stack vertically or flow horizontally. Creating responsive layouts is easier.

Its all up to you. Copy and paste the code below and play with it.

The Layout

Responsive Flexbox

HTML 5

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Kobashi Computing | A HTML 5 + FlexBox Responsive Layout</title>
  6.   <link rel="stylesheet" type="text/css" href="styles.css">
  7.   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
  8.   <link href="https://fonts.googleapis.com/css?family=Scope+One" rel="stylesheet">
  9.   <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  10. </head>
  11.  
  12. <body>
  13.   <div id="page">
  14.     <header>
  15.       <h1>Kobashi Computing</h1>
  16.     </header>
  17.     <nav>
  18.       <a href="/publishing" title="Publishing">Publishing</a> |
  19.       <a href="/advertising" title="Advertising">Advertising</a> |
  20.       <a href="/contact" title="Contact">Contact</a>
  21.     </nav>
  22.     <main>
  23.       <article>
  24.         <h2>This is the title</h2>
  25.         <b>Summary:</b>
  26.         <summary>This is the summary of the article.</summary>
  27.         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  28.  
  29.         <blockquote>A leader is one who knows the way, goes the way, and shows the way</blockquote>
  30.  
  31.         <h3>Top Five Colleges</h3>
  32.         <ol>
  33.           <li>CalTech</li>
  34.           <li>Stanford</li>
  35.           <li>Harvard</li>
  36.           <li>MIT</li>
  37.           <li>Yale</li>
  38.         </ol>
  39.  
  40.         <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  41.  
  42.         <h3>Stock Portfolio</h3>
  43.         <table>
  44.           <thead>
  45.             <tr>
  46.               <th>Symbol</th>
  47.               <th>Company</th>
  48.               <th>Price</th>
  49.             </tr>
  50.           </thead>
  51.           <tbody>
  52.             <tr>
  53.               <td>AA</td>
  54.               <td>Alcoa</td>
  55.               <td>$8.55</td>
  56.             </tr>
  57.             <tr>
  58.               <td>MMM</td>
  59.               <td>3M</td>
  60.               <td>$78.89</td>
  61.             </tr>
  62.             <tr>
  63.               <td>GS</td>
  64.               <td>Goldman Sachs</td>
  65.               <td>$188.12</td>
  66.             </tr>
  67.           </tbody>
  68.         </table>
  69.  
  70.         <h3>Responsive CSS code</h3>
  71.         <code><pre->
  72. @media all and (min-width: 1024px) and (max-width: 1279px) {
  73.   html {
  74.     font-size: 18px;
  75.   }
  76.   #page {
  77.     display: flex;
  78.     flex-direction: row;
  79.     flex-wrap: wrap;
  80.     width: 1024px;
  81.   }
  82.   #page header, #page nav, #page footer {
  83.     width: 100%;
  84.   }
  85.   #page main {
  86.     width: 80%;
  87.   }
  88.   #page aside {
  89.     width: 20%;
  90.   }
  91. }
  92.         </pre->
  93.         </code>
  94.       </article>
  95.     </main>
  96.     <aside>
  97.       <h3>Categories</h3>
  98.       <ul class="nostyle">
  99.         <li><a href="/c" title="C Programming">C</a></li>
  100.         <li><a href="/http" title="HTTP">Http</a></li>
  101.         <li><a href="/software" title="Software">Software</a></li>
  102.         <li><a href="/web-development" title="Web development">Web Development</a></li>
  103.         <li><a href="/wordpress" title="Wordpress">Wordpress</a></li>
  104.       </ul>
  105.       <h3>To Do List</h3>
  106.       <ul>
  107.         <li>Grocery shopping</li>
  108.         <li>Eye appointment</li>
  109.         <li>Get car serviced</li>
  110.         <li>Order pizza</li>
  111.         <li>Water plants</li>
  112.       </ul>
  113.       <h3>Canvas Circle!</h3>
  114.       <canvas id="myCanvas" width="120" height="120"></canvas>
  115.       <script type="application/javascript">
  116.         var myCanvas = document.getElementById("myCanvas");
  117.         var ctx = myCanvas.getContext("2d");
  118.         var x = myCanvas.width/2;
  119.         var y = myCanvas.height/2;
  120.         ctx.beginPath();
  121.         ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
  122.         ctx.fillStyle = "#FF0000";
  123.         ctx.closePath();
  124.         ctx.fill();
  125.       </script>
  126.     </aside>
  127.     <footer>
  128.       <p><a href="/terms-of-use" title="Terms of use">Terms of use</a> | <a href="/privacy-policy" title="Priacy policy">Privacy policy</a> | <a href="/about" title="About">About</a><br>
  129.       <i>Copyright &copy; 2106 Kobashi Computing. All rights reserved.</i></p>
  130.     </footer>
  131.   </div>
  132. </body>
  133. </html>

CSS

  1. @media all and (min-width: 320px) and (max-width: 639px) {
  2.   html {
  3.     font-size: 12px;
  4.   }
  5.   #page {
  6.     display: flex;
  7.     flex-direction: column;
  8.     width: 320px;
  9.   }
  10.   #page header, #page nav, #page main, #page aside, #page footer {
  11.     width: 100%;
  12.   }
  13. }
  14. @media all and (min-width: 640px) and (max-width: 1023px) {
  15.   html {
  16.     font-size: 16px;
  17.   }
  18.   #page {
  19.     display: flex;
  20.     flex-direction: column;
  21.     flex-wrap: wrap;
  22.     width: 640px;
  23.   }
  24.   #page header, #page nav, #page main, #page aside, #page footer {
  25.     width: 100%;
  26.   }
  27. }
  28. @media all and (min-width: 1024px) and (max-width: 1279px) {
  29.   html {
  30.     font-size: 18px;
  31.   }
  32.   #page {
  33.     display: flex;
  34.     flex-direction: row;
  35.     flex-wrap: wrap;
  36.     width: 1024px;
  37.   }
  38.   #page header, #page nav, #page footer {
  39.     width: 100%;
  40.   }
  41.   #page main {
  42.     width: 80%;
  43.   }
  44.   #page aside {
  45.     width: 20%;
  46.   }
  47. }
  48. @media all and (min-width: 1280px) {
  49.   html {
  50.     font-size: 24px;
  51.   }
  52.   #page {
  53.     display: flex;
  54.     flex-direction: row;
  55.     flex-wrap: wrap;
  56.     width: 1280px;
  57.   }
  58.   #page header, #page nav, #page footer {
  59.     width: 100%;
  60.   }
  61.   #page main {
  62.     width: 80%;
  63.   }
  64.   #page aside {
  65.     width: 20%;
  66.   }
  67. }
  68.  
  69. * {
  70.   box-sizing: border-box;
  71. }
  72. html {
  73.   background-color: #ccc;
  74.   font-family: 'Scope One', serif;
  75.   line-height: 1.5;
  76. }
  77. h1, h2, h3, h4, h5, h6 {
  78.   font-family: 'Lobster', cursive;
  79. }
  80. h1 {
  81.   font-size: 3em;
  82. }
  83. h2 {
  84.   font-size: 2em;
  85. }
  86. h3 {
  87.   font-size: 1.4em;
  88. }
  89. h4 {
  90.   font-size: 1.2em;
  91. }
  92. h5 {
  93.   font-size: 1em;
  94. }
  95. h6 {
  96.   font-size: 0.8em;
  97. }
  98. blockquote {
  99.   margin: 1em;
  100.   padding: 1em;
  101.   border: 1px dashed #ccc;
  102.   font-style: italic;
  103. }
  104. blockquote::before {
  105.   content: "\201C";
  106.   font-size: 3em;
  107.   font-weight: bold;
  108. }
  109. blockquote::after {
  110.   content: "\201D";
  111.   font-size: 3em;
  112.   font-weight: bold;
  113. }
  114. code pre {
  115.   background-color: #fcfcfc;
  116.   border: 1px dashed #ccc;
  117.   margin: 1em;
  118.   padding: 1em;
  119.   font-family: 'Source Code Pro', monospace;  
  120.   font-size: 0.65em;
  121.   line-height: 1.1em;
  122. }
  123. img, video, canvas {
  124.   max-width: 100%;
  125. }
  126. summary {
  127.   border: 1px solid #ccc;
  128.   padding: 1em;
  129.   background-color: #fcfcfc;
  130.   color: black;
  131. }
  132. table, th, td {
  133.   border: 1px solid #ccc;
  134. }
  135. th, td {
  136.   font-size: 0.8em;
  137.   padding: 0.5em;
  138. }
  139. th {
  140.   color: white;
  141.   background-color: gray;
  142. }
  143. ul.nostyle, ol.nostyle {
  144.   margin: 0;
  145.   padding: 0 0 0 1em;
  146.   list-style-type: none;
  147. }
  148. #page {
  149.   margin: 1em auto;
  150. }
  151. #page header {
  152.   padding: 1em;
  153.   background-color: gray;
  154.   color: white;
  155.   border-top-left-radius: 0.5em;
  156.   border-top-right-radius: 0.5em;
  157.   text-align: center;
  158. }
  159. #page nav {
  160.   margin: 0;
  161.   padding: 1em;
  162.   text-align: center;
  163.   background-color: black;
  164.   color: white;
  165. }
  166. #page main {
  167.   padding: 1em;
  168.   background-color: white;
  169. }
  170. #page aside {
  171.   padding: 1em;
  172.   background-color: yellow;
  173. }
  174. #page footer {
  175.   padding: 1em;
  176.   background-color: orange;
  177.   text-align: center;
  178.   border-bottom-left-radius: 0.5em;
  179.   border-bottom-right-radius: 0.5em;
  180.   font-size: 0.8em;
  181. }
  182. #categories ul {
  183.   padding: 0;
  184.   margin: 0;
  185.   list-style-type: none;
  186. }
  187. #page nav a {
  188.   color: white;
  189.   text-decoration: none;
  190. }
  191. #page nav a:hover {
  192.   color: white;
  193.   text-decoration: underline;
  194. }

Of Interest