Flexbox Website Layout Examples
These flexbox website layouts can be used as is, or modified to suit.
Website Layout 1
Website Layout 2
Website Layout 3
Website Layout 4
Holy Grail Layout 1
This example uses flexbox for the middle part only (i.e. the nav, article, and aside). The header and footer remain block elements.
Holy Grail Layout 2
This example uses flexbox for the whole layout. It uses nested flex containers. The outer container uses
flex-direction: columnand contains the whole layout. The nested container uses (the default)
flex-direction: rowand contains the middle bit (i.e. the nav, article, and aside).