Flexercise #2

Here is a layout that might be a footer on a web site. Your goal is to add flexbox styles to match this layout (play the video to see how the styles change as the viewport width changes):

For still-image reference, here’s the view at viewport widths of 450px and wider:

and the view at viewport widths of less than 450px:

This is an editable sandbox — try making changes and the preview will update! You can drag the center divider to make the preview pane larger or smaller.

Here are a few resources that may help:

• Josh W. Comeau’s blog post, An Interactive Guide to Flexbox – great for understanding what flexbox is all about.
• A Complete Guide To Flexbox from CSS Tricks – where I go when I need quick visual reference for which flexbox properties and values I want.
• Beginner’s Guide to Media Queries from MDN