Simple layout

My version of the Holy Grail layout with just one centred column for the content and full width header and footer, but with all content containers width set and centralised:

 

*note: this example has been exaggerated to emphasise the layout, in particular line 6 'flex: 0 0 10em' has the 3rd (flex-basis) parameter set to 10em (instead of 'auto') to show the containing elements for the header & footer. Remember: flex is shorthand for flex-grow, flex-shrink and flex-basis combined.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *