Responsive Menu with CSS Flexbox

I’ve been getting into CSS flexbox lately and I think it’s really awesome it was a bit confusing at first, but once you start using it, it starts to click and make sense. Flexbox makes layouts in CSS a lot easier than using grids (in my opinion), it also makes making menus a breeze.

For example, I quickly coded this menu for the “wish list” site that I’m building. I’m displaying the list items as block elements by default (a mobile first approach) and then I’m displaying them as flex when the screen is enlarges. You can check out my codepen for it here:

See the Pen Wishlist Menu by Tyler Souza (@tysweezy) on CodePen.

I’m still working on the toggle functionality, but you get the gist of it. Here’s a more in-depth article on flexbox on CSS-Tricks. The article definitely explains the concept a lot better that I can. Basically, I’m using flexbox’s “justify-content” property and centering the menu to “center.” If I wanted to, I can easily have the list items share the width of the page.

Closing Points

I’m quite new to flexbox and still learning. 😛 Though, I want to go more in detail with it. I think it’s a lot easier than working with a grid system. Especially trying to clear those annoying floats. Plus, it makes developing responsive sites a little easier depending on the situation.

Stay tuned! Cheers!