Full-width pinned layouts with flexbox

These layouts were inspired by Dan Mall's responsive screenshots in his case study for the Crayola site. I wanted to try recreating the layout pattern with flexbox. So, make sure you view this in a browser that supports flexbox. Since this is just a demo, it doesn't have the fallbacks for older browsers that I would normally include in a real-world page.

Read the article that this test page is related to.

Using display:table

mobile

looks great from here to there

desktop

Using flexbox, basic

looks great from here to there

mobile
desktop

Using flexbox, advanced

it's all good

mobile
desktop

Using flexbox, cute

My, how I've grown!

3 months old
3 years old