Flexbox for Desktop & Mobile

Flexbox is a CSS3 module allowing arrangement of elements on a web page. It has rapidly gained popularity due to the fact that it is so far the best way to layout web pages compared to other old methods (table, float, grid, etc.). Since most modern web browsers today support flexbox (), I've started using it on many of my recent projects. Have we found Matthew's Holy Grail of web layout with flexbox? I'll let you be the judge of that after seeing what it can do with my example below. Note: there are many ways one can lay out a web page; in my example, I used a typical three columns with fixed header and footer.

Click the red button below from as many devices (desktop, laptop, tablet, smartphone) as you can to bring up the example web page that is using flexbox for its main content layout and see how responsive the page is based on the device that you've used. You can also view the same responsive effect by resizing the web browser on your desktop or laptop. The @media query breakpoints used:

These breakpoints used here are just for example. In real situation, the page's contents and how nicely they fit at certain screen size will usually determine where the breakpoints should be placed. The main point here is how simple and clean the codes are when using flexbox for the layout. So is flexbox the Holy Grail that we've been looking for? Although there are issues with flexbox, it comes as close one can hope for in being that Holy Grail

FLEXBOX
================ CSS ================
@media only screen and (max-width:639px) {
header {
  background-color: #F38630;
  height: 30px;
  position: fixed;
  top: 0;
  width: 100%;
}
footer {
  background-color: #EC961A;
  bottom: 0;
  height: 20px;
  position: fixed;
  width: 100%;
}
section {
  display: flex;
  flex-flow: column nowrap;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 40px 11px 5px 10px;
}
.column1, .column2, .column3 {
  margin: 10px;
  padding: 10px;
}
.column1 {
  background-color: #69D2E7;
  flex: 1 3 0px;
}
.flexbox2-wrapper {
  display: flex;
  flex-flow: column nowrap;
  flex: 5 0 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
.column2 {
  background-color: #E0E4CC;
  flex: 3 1 20px;
}
.column3 {
  background-color: #A7DBD8;
  flex: 2 1 0px;
}
}

@media only screen and (min-width:640px) and (max-width:999px) {
header {
  background-color: #F38630;
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
}
footer {
  background-color: #EC961A;
  bottom: 0;
  height: 30px;
  position: fixed;
  width: 100%;
}
section {
  display: flex;
  flex-flow: column nowrap;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 50px 11px 15px 10px;
}
.column1, .column2, .column3 {
  margin: 10px;
  padding: 10px;
}
.column1 {
  background-color: #69D2E7;
  flex: 1 0 0;
}
.flexbox2-wrapper {
  display: flex;
  flex-flow: row nowrap;
  flex: 5 0 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
.column2 {
  background-color: #E0E4CC;
  flex: 3 3 0;
}
.column3 {
  background-color: #A7DBD8;
  flex: 1 0 0;
  min-width: 210px;
}
}

@media only screen and (min-width:1000px) {
header {
  background-color: #F38630;
  height: 50px;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
}
footer {
  background-color: #EC961A;
  bottom: 0;
  height: 40px;
  position: fixed;
  width: 100%;
}
section {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 60px 11px 20px 10px;
}
.column1, .column2, .column3 {
  margin: 10px;
  padding: 10px;
}
.column1 {
  background-color: #69D2E7;
  flex: 1 0 240px;
}
.flexbox2-wrapper {
  display: flex;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  width: 100%;
}
.column2 {
  background-color: #E0E4CC;
  flex: 2 1 100%;
}
.column3 {
  background-color: #A7DBD8;
  flex: 1 0 240px;
}
}
=====================================

=============== HTML ================
<header></header>
<section>
  <div class="column1"></div>
  <div class="flexbox2-wrapper">
    <div class="column2"></div>
    <div class="column3"></div>
  </div>
</section>
<footer></footer>
=====================================