This week in class we learned about Flexbox. Basically, Flexbox is a CSS layout mode where it ensures that all the elements on a page fit in the proper, predictable, and even no matter the screen size. Flexbox is an improvement over the normal block model as it doesn’t use floats.

So far, Flexbox seems very simple to use and it looks like there are plenty of documentations for anyone to use. This one, for example, stood out to me because it has very good visual representations of Flexbox so you can understand it very easily. Another one, from w3schools, I liked because it has the “Try It Yourself” buttons where you can try and test out any HTML or CSS right in a small part of the website.

Here is an example of Flexbox’s ‘justify-content’ in action.

We were given a tutorial / game called FlexboxFroggy to help learn Flexbox by using it. I thought this was a pretty neat and clever tutorial. Even when I got stuck in it the hints were very helpful. The last challenge was the hardest as it had you use everything you’ve learned in the last 23 challenges up to that point but I was able to finish it without any problems.

From what I’ve learned so far about Flexbox I feel it will be extremely useful. Sometimes while using the box model in CSS aligning elements exactly where you want them while having an even amount of space between them would be very tricky. I love the fact that we were told about this because one of the things I do find difficult is having applications be mobile friendly as many elements on all my applications so far get very squished on smaller screens. This will no doubt be fixed when we work on our mobile app project here at UIT.


Leave a Reply