Even though this is a Javascript practice series, today was all about CSS. And that’s a good thing because have you ever wondered how the web would look like without CSS?

Well that’s an image i wouldn’t like to imagine. CSS has a role to play in web development and a big one for that matter. I hear a lot of people in the dev community saying “CSS is easy”, however if it is so easy, why do we have !important showing up in many style rules.

Anyways, today i got to play more with Flexbox which i absolutely love.

I remember in early 2016 when i started getting into responsive design, i retried boostrap but it just didn’t do it for me. Then i came across Flexbox and i was thrilled, i mean i could finally center elements vertically with no hustles.

This challenge was not about just about centering elements vertically. It involved hiding elements, making them visible when element is clicked and adjusting the sizes of all elements after the previous action.

The javascript code was there to take care of the addition or removal of CSS classes that resulted in all the visual changes.

Overal, i enjoyed this exercise as it was a nice refresher from javascript and as you can kinda tell, i really like Flexbox.

What cool projects have you built with Flexbox? Feel free to tweet @me. You can find the code here.