Flexbox exercises

A set of layout exercises which are expected to be solved using flexbox. These exercises are aimed at devs who have learnt flexbox and now want to test their understanding or get some hands-on experience of the core concepts and the different layout approaches.

Points to Note

These exercises are for testing out knowledge of flex concepts, as such they have been kept very simple

• Exercises only use CSS and HTML. CSS is for basic styling and applying flexbox properties and HTML for the page structure.
• The solutions are expected to be very simple and don't have any fallback/support for non-compliant browsers (See resources for more inforamtion on this).

Exercises

• Centering
• Sticky Footer
• Navigation Bar
• Flexible Width Grid
• Holy Grail Layout

Resources

• Leveling up with FlexBox
• Using CSS flexible boxes by MDN
• Flexbox Reference on Codrops
• Mixing old and new for Best Browser Support on CSS Tricks
• Solved by Flexbox demos by Philip Walton