Flexbox Website Layout Examples

• Grids built with CSS Grid
• Flexbox Examples

These flexbox website layouts can be used as is, or modified to suit.

• Website Layout 1

  • View example

  

• Website Layout 2

  • View example

  

• Website Layout 3

  • View example

  

• Website Layout 4

  • View example

  

• 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.

  • View example

  

• Holy Grail Layout 2

  This example uses flexbox for the whole layout. It uses nested flex containers. The outer container uses flex-direction: column and contains the whole layout. The nested container uses (the default) flex-direction: row and contains the middle bit (i.e. the nav, article, and aside).

  • View example

  

• Grids built with CSS Grid
• Flexbox Examples