Assignment: Flexbox Exercises

Construct 3 flexbox based components. Place them all on a single HTML page and use a single stylesheet.

Example screenshots are included here, but you're welcome to style the components in any way you like. Yours don't need to have a uniform theme or colors like these, either. Just be sure to style things in a way that it's clear to see the sizes and spacing of the elements (using backgrounds or borders).

Use a unique class name when building each component, so that the CSS rules don't overlap or conflict with each other.

  1. Create a horizontal navigation bar. The items can stretch to fill all the available width, or be distributed.

    Include about five items in your nav. For example, you can use: Home, About, Contact, Categories, Archives.

    screenshot of a basic flexbox nav example
  2. Create a horizontal scroll container. In other words, create a container with several items in line that you must scroll horizontally to see. Use flexbox and overflow properties to accomplish this. (Don't use white-space: nowrap, which can do something similar.) The container should be responsive so that it adapts to different screen widths, but make sure there's enough inner content to scroll even on larger viewports.

    The content of the items can be anything at all, even small items with generous padding.

    NOTE: With overflowing content inside a flexbox, most browsers do not take into account the margins and padding after the final flex item. Don't worry if you have trouble getting white space around the final item in your scroll area.

    screenshot of a basic flexbox scroller example
  3. Create a responsive stack. Create a container with two items that stack on mobile, and switch to a row on wider viewports. The first item in the stack should appear on the right when the items switch to a row. (Hint: Both the stacking and the order of items as a row can be set up using flex-flow.)

    screenshot of a basic flexbox responsive stack example, viewed as a stack screenshot of a basic flexbox responsive stack example, viewed as a row