30 Days of CSS Girls

March 22, 2019

Flexible Navigation Bar

Creating layouts resilient to different browsers and dimensions is constantly a sweet challenge for front engineers. Common problems include

  • vertical menus of different content widths

v.s.

  • horizontal navbars with different content heights (like our navbar on the home page!)

Flexbox allows us to finetune alignment and space distribution among our the flex box items.

Objectives

To begin with, if you are completely new to flex box, I invite you to check out this Flex Box Froggy challenge. It should take some an hour or so. You may skip this if you already know flexbox’s magics.

Then, for today’s challenge, please implement a navbar of your choice, using flexbox.

Here’s mine: (somewhat more of a sidebar I guess 🙈)

Reading

Flexible Box Module 1, sections 1 - 6