Flexbox Example: Holy Grails
2006
article
on Holy Grail Layout. This advice belongs to a previous era.
*, *:before, *:after { box-sizing: border-box; } header {text-align: center; background: hsla(150,100%,70%,.5); border-bottom: 2px solid #333;} section, .main { display: flex; flex-direction: column; background: hsla(150,100%,70%,.5); min-height: 200px;} aside.a { order: 0;} .main > * {padding: 10px;} footer {background: hsla(100,100%,70%,.5); text-align: center; border-top: 1px solid #333;} @media (min-width: 568px) { .main { flex-direction: row; flex: 1;} article { flex: 1; } aside.a { order: -1;} aside.a, aside.b {flex: 0 0 6em; background: hsla(100,100%,70%,.5);} }
<section><header><h1>Flexbox Example: Holy Grails</h1></header> <div class="main"> <article><p> 2006 <a href="http://alistapart.com/article/holygrail">article</a> on Holy Grail Layout. This advice belongs to a previous era.</article> <aside class="a">Aside Column A</aside> <aside class="b">Aside Column B</aside> </div> <footer>Footer</footer> </section>