cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <header>
    <h2>Simple flex 'holy grail' layout</h2>
  </header>

  <article class="center">
    <h3>Back in the day...</h3>
    <p>It would have taken some serious CSS trickery to get the columns' height to match that of the center. This was called the 'holy grail' of layouts back in the late '90's, early 00's, and has been the bane of web developers for years.</p>
 <p>Flex makes this relatively easy to do, and a LOT more semantic. The drawback - browsers lower than IE10 get confused by flex, and aren't reliably showing what they should. So we have to use common sense in the use of Flex.</p>
    
  <p>Flex isn't perfect. And it's not always wise to use. It's risky to lay out an entire site like this, as you don't know what kind of browser is accessing your site. If your demographic is say, elderly, or those running work computers in governments, some corporate cultures (banks for example) or schools, you're going to watch it fall down and have temper tantrums in IE8.</p>
    
    <p>Look to the right for another way, young padawan. Or was that 'look to the light'...something like that.</p>
  </article>
  
  <aside class="left">
    Look ma, short text!
  </aside>
  
  <aside class="right">
    <p>Another way to lay this out that's more reliable cross browser, and cross platform: </p>
    <p><a href="https://codepen.io/fay-lisa/pen/pEWWyE" target="_blank">Alt holy grail layout pen</a></p>
  </aside>
  
  <footer>
     <ul> 
     <li>
       Browser support for Flex: <a href="http://caniuse.com/#search=flexbox"  target="_blank">CanIUse.com</a>
     </li>
     <li>
       Known bugs + issues associated with Flex and workarounds: <a href="https://github.com/philipwalton/flexbugs" target="_blank">Philip Walton's GIT</a>
     </li>
    </ul>
  </footer>
</div>
            
          
!
            
              /* simple flex layout  */

// setting up the containers that require it, to have flex. instead of using the codepen prefixer, I've included them here. though in production this shouldn't all be in the css, but brought in prefixer. 
.container, header, footer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.container {
  min-height: 100vh; // this way the columns, header and footer automatically take up at least the height of the page. this prevents shorter content from cutting the page short and seeing the footer halfway up the height of the browser.
  
  // gives everything 10px padding
  & > * {
    padding: 10px;
  }
  // give the elements a mobile first width. the order is set in the html for mobile first as well, and altered later.
  header, aside, article, footer {
    flex: 1 1 100%;
  }  
  
  // add styling for each section: 
  
  //shared
  header, footer {
    justify-content: center;
    align-items: center; // look at this full screen from 'change view' above to the right, and this will vertically center the text. 
  }
  
  // now we color just the elements
  header {
     background: #d8eaf6;
  }
  
  .left {
    background: #90b9d2;
  }

  .center {
    background: #c3dae6;
  }
    
  .right {
    background: #68a3c2;
  }
  
  footer {
    background: #2489b0;
  }
  
  // now we change layout just slightly for larger than phone screens (ipad, ipad mini, larger phablets)
  @media all and (min-width: 600px) {
    aside {
      flex: 1 auto;
    }
  }
  
  // and re-arrange the flex elements for desktop (ipad is 768px so we guage this for larger-than this)
  @media all and (min-width: 769px) {
    .left {
      flex: 1; // tells it to share the row with .right
      order: 1; // sets the left column as 'first' in the row
    }

    .center {
      flex: 3; // makes the center column 3 times the size of the other 2
      order: 2; // sets the center as just that
    }

    .right {
      flex: 1;
      order: 3; // sets the right column as the third in the row
    }
    
    footer {
      order: 5; // places the footer where it should be: last
    }
  }
}


// basic styling. 
body {
  font-family: Helvetica, Arial, sans-serif;
  background: aliceblue;
}
* {
  box-sizing: border-box;
}
//a tags 
a {
  color: #fcf58b;
}
h2, footer {
  text-align: center;
}
h3 {
  margin: 0 0 10px 0;
}
p {
  margin: 5px 0 20px;
}
ul {
  // getting rid of the browser default
  margin: 0;
  padding: 0;
  list-style-type: none;
  
  li {
    margin: 10px 5px;
    display: inline-block;
    padding: 5px;
    background: #196b8a;
    color: aliceblue;
    
    a { color: aliceblue; }
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console